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

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);          }      });  });