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!

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);
        }
    });

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!

HTML:

<div class="demo">
  <div id="tabs">
    <ul>
      <li>
        <a href="#tabs-1">
          Tab-1
        </a>
      </li>
      <li>
        <a href="#tabs-2">
          Tab-2
        </a>
      </li>
      <li>
        <a href="#tabs-3">
          Tab-3
        </a>
      </li>
    </ul>
    <div id="tabs-1">
      <p>
        Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. 
        <a href="#">
          Curabitur
        </a>
        nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
      </p>
    </div>
    <div id="tabs-2">
      <p>
        Morbi tincidunt, dui sit amet facilisis feugiat, odio metus 
        <a href="#">
          gravida
        </a>
        ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis.
      </p>
    </div>
    <div id="tabs-3">
      <p>
        Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. 
        <a href="#">
          Aliquam
        </a>
        vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.
      </p>
    </div>
  </div>
</div>
<!-- End demo -->

jQuery:

$(function() {
    $("#tabs").tabs();
});

$(".ui-widget-content a").live("click", function() {
    var ID = $(this).closest(".ui-widget-content").attr("id").toString().substr(-1);
    ID = (parseInt(ID) - 1) + 1;
    var No_of_tabs = $("#tabs").tabs('length');
    if (ID >= parseInt(No_of_tabs)) {
        ID = 0;
    }
    $("#tabs").tabs('select', ID); // Move to another tab
    $("#service").load($(this).attr("href"), function() {
        //when content loaded, do what you want to do...
    });
    return false;
});

I have done complete bin on http://codebins.com/bin/4ldqpae