Jquery UI Tabs - open link inside tab via ajax

Question

How can I open a tab and load a link via ajax from another tab. Eg:

• User clicks link inside #tab_a
• #tab_a hides
• #tab_b shows with .loading applied
• Content is loaded via ajax into #tab_b
• .loading removed from #tab_b

I'm using Jquery UI tabs

Thanks!

Answer 1

Assuming "tab_a" is the actual tab to click on and "tab_a_content" is where the content actually goes in (same for tab_b and tab_b_content):

$("#tab_a_content link").click(function() {
    $("#tab_b").trigger("click");
    $("#tab_b_content").addClass("loading");
    $.ajax({
        url: "whatever.html",
        success: function(data) {
            //Do whatever you need to do with your data
            $("#tab_b_content").removeClass("loading").html(data);
        },
        error: function(err) {
            //Display error messages and hide the loading class
            $("#tab_b_content").removeClass("loading").html("Error! " + err);
        }
    });

Answer 2

Didn't have any luck with your code Willson, but the jquery ui tabs docs set me off in the right direction.

$(".tab_content a").live("click", function(){ 
 $("#tab_container").tabs('select', 1); // switch to other tab
 $("#service").load($(this).attr("href"), function(){
  //once content loaded, do stuff
 });
 return false;
});

Thanks!