Refresh tab content on click in JQuery UI Tabs

Question

Content of TAB1 is loaded by ajax from remote url. When TAB1 is selected, I have to switch to TAB2 and then back to TAB1 to refresh the loaded content.

How to make TAB1 refresh loaded content when click on its tab?

Edit: HTML code is as below

<div id="tabs">
    <ul>
        <li><a href="url1">Tab1</a></li>
        <li><a href="url2">Tab2</a></li>
    </ul>
</div>
<script type="text/javascript"> 
    $(document).ready(function(){
        $tabs = $("#tabs").tabs({
            select: function(event, ui) {
                $('a', ui.tab).click(function() {
                    $(ui.panel).load(this.href);
                    return true;
                });
            }
        });
});
</script>

Answer 1

On the "success" of the jQuery call, you can replace the html with the new html.

You have'nt posted any code so you may already be doing this but;

success: function(msg) {
    $('.TabOne').html(msg);
}

the above works if you are returning html. If you are returning an object then you may need to do extra work but by and large the above should work.

Edit I should mention also that .TabOne is a class name. So your tab content holder must have a class of TabOne for the above code to work.

Remember that the class name doesn't have to actually exist as a style for this to work either.

Edit 2

Hmmm, I see what you are trying to do now and I'm at a bit of a loss. Will do some testing and might be able to get back to you.

Sorry.

Answer 2

I had the same problem with some ajax content in a jQuery tab.

The tab loads a flot graph but it would work only when it was the tab you loaded first.

I fixed this with a kind of cheesy work around but it was effective.

I took all of my flot js code and dumped it into a separate .js file and put it in a function

function doFlotGraph(data){
    $.plot({plotcode});
};

I then did the following within the tab

$.getScript('url/doFlotGraph.js',function(){
    doFlotGraph(data);
});

This allowed flot to do its thing since the document ready in the tab had already finished by the time the ajax $.getScript was activated.

You could then put the ajax within a .click for that tab.