I'm very new to programming so please forgive me my noobness. I'm using the excellent jQuery tabs for my application, I load external content into the tabs via ajax, and in one of those tabs I need to programatically reload the content of that tab fter a result. I've followed the documentation* to no avail.

I have initialized the tabs in my root page very simply with:

Javascript:

  $(document).ready(function(){
    $("#tabs").tabs({ cookie: { expires: 30 } });    
  });

The HTML:

<div id="tabs">
<ul>
     <li><a href="#moderatorManage"><span>Find and Manage Moderators</span></a></li>
     <li><a href="flaggedCards/" id="flaggedCards" ><span>Flagged Cards</span></a></li>
     <li><a href="pendingDelete/"><span>SinBin / Pending Delete</span></a></li>
</ul>
</div>

You can see I load an external URL of "flaggedCards/" In there I have more jQuery with this function:

    $(document).ready(function(){
        $("#controls_{{id}} input").click(function() {

                $(this).parent().parent().parent().addClass("highlight").fadeTo("slow", 0.1);
                $("#tabs").tabs( 'load' , 0 ); // fails also tried various selectors

        });
 });

What I am trying to do, is call the flaggedCards tab to reload when that function is called, I've tried various different syntaxes to no avail.

• docs.jquery/UI/API/1.7.1/Tabs#method-load

I'm very new to programming so please forgive me my noobness. I'm using the excellent jQuery tabs for my application, I load external content into the tabs via ajax, and in one of those tabs I need to programatically reload the content of that tab fter a result. I've followed the documentation* to no avail.

I have initialized the tabs in my root page very simply with:

Javascript:

  $(document).ready(function(){
    $("#tabs").tabs({ cookie: { expires: 30 } });    
  });

The HTML:

<div id="tabs">
<ul>
     <li><a href="#moderatorManage"><span>Find and Manage Moderators</span></a></li>
     <li><a href="flaggedCards/" id="flaggedCards" ><span>Flagged Cards</span></a></li>
     <li><a href="pendingDelete/"><span>SinBin / Pending Delete</span></a></li>
</ul>
</div>

You can see I load an external URL of "flaggedCards/" In there I have more jQuery with this function:

    $(document).ready(function(){
        $("#controls_{{id}} input").click(function() {

                $(this).parent().parent().parent().addClass("highlight").fadeTo("slow", 0.1);
                $("#tabs").tabs( 'load' , 0 ); // fails also tried various selectors

        });
 });

What I am trying to do, is call the flaggedCards tab to reload when that function is called, I've tried various different syntaxes to no avail.

• docs.jquery./UI/API/1.7.1/Tabs#method-load

• javascript
• jquery
• jquery-ui

3 Answers 3

I was able to duplicate the exact same issue that you report in your post. This is how I ended up solving it.

In the root page hosting the tabs, add this function:

function selectTab(index){
 $("#tabs").tabs('load', index);
}

Then in your external Url page "flaggedCards/", replace the line that says:

$("#tabs").tabs( 'load' , 0 );

with this:

selectTab(0);

I don't know why this workaround does the trick. Perhaps it is a bug.

To get the script executed, you have to make sure the ajax requests's data type is "html" - see $.ajax options. To do this, try the tabs ajaxOptions option when setting up your tabs.

$("#tabs").tabs({ cookie: { expires: 30 }, ajaxOptions: {dataType: "html"} });    

The other issue might be that the $(document).ready(function(){ probably isn't firing when the tab content is being loaded via ajax. Try removing that and the corresponding }. When it's loading your content via ajax, hopefully it's inserted it in the document before it evals the scripts.

I'm out of ideas. Hope that helps :-)

i should mention that it is running the scripts in the html it loads, see the addclass function, that runs fine, however after running that it doesnt reload the tab with the code i have entered. i will try adding that datatype however.