Tab or accordion based page - how is it done in the server side?

Question

I have a web page with tabs or accordion, generated with YUI or jquery or another javascript+css framework.

Say an HTML form is processed in one tab. What should the server do? Send back all the tabs, with the tab that submitted the form having the results and all the other tabs unmodified? Or what?

Answer 1

You could use Jquery's $.get function to fetch items on click.

Answer 2

You should always send documents that are still usable when JavaScript support is not available. And as most of such navigation use the fragment identifier of the URI to identify the part of a document that should be displayed, you could use this too and target your form to this fragment:

<form action="#tab3" method="post">

Or you use JavaScript to send the data, fetch the response and display it inside the current tab.

Answer 3

As you select each new tab, you can send a jQuery AJAX request for just the content you require, e.g. if your user clicks on a tab titled "Sports", you can make a request to "sports.html" on your server, and display it in the tab.

There's a good walk-through here that describe how to achieve this, all built upon a basic function like:

// Clicked on "sports" tab
$("#sports").click(function() 
{ 
    // Make ajax call
    $.ajax( 
    { 
        url: "sports.html",     // page to be called
        cache: false, 
        success: function(message) 
        { 
            // Success code returned, clear sports
            // content area and inject server response
            $("#sportscontent").empty().append(message); 
        } 
    }); 
});