Question

I’m using the jqueryui tabs code, adding new tabs, and dynamically creating new content in the new tabs via ajax. However, the problem is that I can’t reliably select the new tab, and my new content goes in the first tab.
The code I’m using is as follows:

var $tabs = $("#tabs").tabs({
   tabTemplate: "...etc",
   add: function(event, ui) {

   $(ui.panel).append("<p id=\"demo\"></p>");

   $.ajax({
     type:     "POST",
     url:      "comms.php",
     data:     {country:tab_content},
     dataType: "script"
});

php code on the server writes to the ‘demo’ para, but the problem is that $(ui.panel) always selects ‘demo’ in the first tab. I’ve tried some variations on this, including

$('tabs').tabs("select", ui.panel.id);
$(ui.panel).append("<p id=\"demo\"></p>");

and

var top  = $(ui.panel).get(0);
var demo = document.createElement("p");
demo.setAttributeNS(null, "id", "demo");
top.appendChild(demo);

with no luck. Any idea how I select the new tab for output? Thanks.

Answer 1

I guess your problem happens because all the <div> you append to ui.panel in your add callback have the same ID. It must be unique.

Try giving them a different ID.