CODEWITHSUNDEEP
phpajaxcodeigniter
Sneaksta
Sneaksta

Reputation: 1061

jQuery Tabbed Ajax content

So I need to make 3 tabs with query (got this part down), but each of them needs to retrieve filter-able data through an Ajax request. Basically the page is setup with a static div on the left with the filter in it, and then on the right the tabs change according to which one you pick.

I'm just wondering what would be the best method of grabbing the ajax content and putting it into each tab?

I hope I made my question clear.

Upvotes: 0

Views: 368

Answers (1)

Matt van Andel
Matt van Andel

Reputation: 657

This should be pretty straightforward if I understand your question correctly. For instance, let's assume you want to retrieve a static webpage and simply insert all the content of that webpage into your container div...

$('#tab1').click(function(){
    //Fetch a webpage (via GET) and load into 'result'
    $.get('/path/to/stuff.htm',function(result){
        //Replace content of container with result
        $('#containerDiv').html(result);
    });
});

It's really that simple. If you need a piece of the result (such as extracting CDATA from an XMLRPC request), then you can simply load the result as a jQuery object, find the element, and then load that... like so...

$('#tab1').click(function(){
    //Fetch a webpage (via GET) and load into 'result'
    $.get('/path/to/stuff.htm',function(result){
        //Make result a jQuery obj
        result = $(result);
        //Replace content of container with result
        $('#containerDiv').html(result.find('mycdata').text());
    });
});

I should also note - if you have an XML result that is wrapped in CDATA, always read it as .text() even if you are inserting it as html. If the result isn't wrapped in CDATA, read it as .html().

UPDATE: If you need to send extra data to the server (such to sort ASC or DESC), you might do this...

$('#tab1').click(function(){
    //Fetch a webpage (via GET) and load into 'result'
    $.get(
        '/path/to/service', 
        { sort:'ASC', startDate:'2012-04-01', endDate:'2012-04-08'}, 
        function(result){
            //Replace content of container with result
            $('#containerDiv').html(result);
        }
    );
});

Upvotes: 1

Related Questions