jQuery UI ajax Tabs and passing a parameter to the url.

Post by **maboroshi** » 17 Jan 2014, 02:07

As the title says how can I pass a parameter to one of my jQuery ajax Tabs?

at the moment I have:

        jQuery.noConflict();
        jQuery(function() {    
            jQuery("#tabs").tabs({
                
            });
        });

followed by a bunch of code to read a json file and make the data being brought in globally accessible as well as do a bit with it.

I would like to pass as argument to the tab url this code.

Code: Select all

       function projectID() {
            return parseInt(globalID.id);
        }

Ultimately something like the following python/html code would happen

Code: Select all

               <div id="tabs" class="container">
                        <ul>
                            <li><a href="{{=URL('control_panel', 'view_projects', args=theJavascriptParameter')}}">Project</a></li>

The URL function above is part of the web2py frame work the args value would be passed to a database query.

Thanks for any help!

Mabs

Post by **ayu** » 17 Jan 2014, 12:12

Don't you already build the list of tabs from python or such?
The projects you are going to display as tabs has to come from a database or something no?
So why not try to put the project ids there when the structure is loaded?

Or, if you have to do it dynamically afterwards, then fill the structure with tabs with javascript or such, and add the ids in the process.

Post by **maboroshi** » 17 Jan 2014, 15:11

nah the data is being brought in using jQuery getJson function. I figured it out a bit further though.

The earlier attempts had to do with the way the server was handling the URL being passed to it.

I am now still trying to figure out this Tabs issue and load the data I want. I can load it directly if I hard code the values but that won't be effective.

This is what I am currently working on which isn't working quite yet.

Code: Select all

 $("#tabs").tabs({ });
                                
$("#tabs ul li a #test").click(function() { 
    $(this).attr('href', $(this).attr('href') + "?id=2");
});

Apparently a null value is being passed with this. The URL should look like this with the Javascript methods.

Code: Select all

https://85.25.198.166/NIN/control_panel/view_projects?id=2

But I don't think it's being appended correctly..

Any advice would be great!

Post by **ayu** » 18 Jan 2014, 19:06

Sorry I took some time to answer this, but some important stuff came up with one of the bitcoin miners, so had to repair it a bit.
It's up and running again now though.

Anyway, so the tabs are not really the problem as I can see it, and "passing" a variable to them isn't really the way to solve it I think.
What you can try is to loop through your project IDs and just append them.

Like, if you grab the ids with something like

Code: Select all

$.getJSON( "ajax/test.json", function( data ) {
    var items = data;
});

And then just loop through and append to the tabs, it should work.

Code: Select all

<script>
$(function() {
    $( "#tabs" ).tabs({
        beforeLoad: function( event, ui ) {
            ui.jqXHR.error(function() {
                ui.panel.html(
                    "Error" );
            });
        }
    });
});

//Place a document.ready function here that loops through the list of ids and 
//populates the ul list below with <li><a href="stuff.php?id=items[indexOfProj]['id']">Tab</a></li>
//or something along those lines.
</script>
</head>
    <body>
        <div id="tabs">
            <ul>
                <!-- fill with li with the correct id -->
            </ul>
        </div>
    </body>
</html>

Post by **maboroshi** » 20 Jan 2014, 01:58

This actually makes more sense then what I had done to overcome this. I am just to lazy now to implement it. However I more than likely will at one point.

Edit * This is how I did it.

Code: Select all

// Grab Projects
var projectid = '?projectid='+project["projects"].id;
                            
var _href = $("a#projectTab").attr("href");
$("a#projectTab").attr("href", _href + projectid);

suck-o.com

jQuery UI ajax Tabs and passing a parameter to the url.

jQuery UI ajax Tabs and passing a parameter to the url.

Re: jQuery UI ajax Tabs and passing a parameter to the url.

Re: jQuery UI ajax Tabs and passing a parameter to the url.

Re: jQuery UI ajax Tabs and passing a parameter to the url.

Re: jQuery UI ajax Tabs and passing a parameter to the url.