Jquery UI Tabs - открыть ссылку внутри вкладки через ajax

Question

Как открыть вкладку и загрузить ссылку через ajax из другой вкладки. Например:

• Пользователь нажимает ссылку внутри # tab_a

• tab_a скрывает

• tab_b показывает с примененной загрузкой

• Контент загружается через ajax в # tab_b
• .загрузка удалена из # tab_b

Я использую вкладки Jquery UI

Спасибо!

Answer 1

Не повезло с вашим кодом, Уилсон, но документы jquery ui tabs заставили меня пойти в правильном направлении.

$(".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;
});

Спасибо!

Answer 2

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

Я сделал полный ящик на http://codebins.com/bin/4ldqpae

Answer 3

Предполагая, что tab_a - это фактическая вкладка, по которой нужно щелкнуть, а tab_a_content - то, куда фактически входит содержимое (то же самое для tab_b и 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);
        }
    });