Jquery tabs and forms

Question

Hi, this may be a weird problem but I’m not sure the best way to go about it..

I am using JQuery ajax tabs. The tab section is dynamic so multiple tabs can be added, as the content is loaded via Ajax the same content can be loaded into different tabs. The other important detail is that i am using the Cache option so the tabs maintain state.

Now problems arise when more than one tab has been loaded. It looks like HTML items such as forms and divs now have duplicated id's within the DOM, so Ajax queries can no longer distinguish between the elements.. The result is that any JavaScript/Ajax breaks.

Does anyone have any suggestions for way to tackle such a problem?

Thanks in advance..

Answer 1

When the ajax call is made and returns, you can get the HTML and modify the id's of the new tab contents before you load into the tab. This would allow you to have IDs like:

tab1input1

tab1input2

tab2input1

tab2input2

Edited

In the demo on Jquerys Site http://jqueryui.com/demos/tabs/#ajax the source code here displays the following

    <script type="text/javascript">
     $(function() {
      $("#tabs").tabs({
       ajaxOptions: {
        error: function(xhr, status, index, anchor) {
         $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
        }
       }
      });
     });
   </script>

you should notiec that you can set specific ajax options with the tab control. Refer to documentation on $.ajax in jquery's documentation. Another option is success which allows you to run a function after the ajax call was successful.

Using the success option you can

success: function (data) {
  $("input", data).each( function () {
    $(this).id(yourtabid + this.id);  
    $(this).name(yourtabid + this.name);
  });
}

this should take an ajax call that returns HTML and modify the input ids and names in the html and append the tabid to your new data.