如何使用Bootstrap选项卡加载AJAX？

时间：2011-12-10 13:53:36

标签： ajax twitter-bootstrap

我使用了bootstrap-tabs.js，它运行得很好。

但我没有找到有关如何通过AJAX请求加载内容的信息。

那么，如何在bootstrap-tabs.js中使用AJAX加载？

10 个答案:

答案 0 :(得分：37)

在Bootstrap 2.0及更高版本中，你必须改为绑定到'show'事件。

以下是HTML和JavaScript的示例：

<div class="tabbable">
    <ul class="nav nav-tabs" id="myTabs">    
        <li><a href="#home"  class="active" data-toggle="tab">Home</a></li>
        <li><a href="#foo" data-toggle="tab">Foo</a></li>
        <li><a href="#bar" data-toggle="tab">Bar</li>
    </ul>
    <div>
        <div class="tab-pane active" id="home"></div>
        <div class="tab-pane" id="foo"></div>
        <div class="tab-pane" id="bar"></div>
    </div>
</div>

JavaScript的：

$(function() {
    var baseURL = 'http://yourdomain.com/ajax/';
    //load content for first tab and initialize
    $('#home').load(baseURL+'home', function() {
        $('#myTab').tab(); //initialize tabs
    });    
    $('#myTab').bind('show', function(e) {    
       var pattern=/#.+/gi //use regex to get anchor(==selector)
       var contentID = e.target.toString().match(pattern)[0]; //get anchor         
       //load content for selected tab
       $(contentID).load(baseURL+contentID.replace('#',''), function(){
            $('#myTab').tab(); //reinitialize tabs
       });
    });
});

我在这里写了一篇关于它的帖子：http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-ajax-load-content/

答案 1 :(得分：34)

您可以在事件处理程序中监听change事件和ajax加载内容

$('.tabs').bind('change', function (e) {
    var now_tab = e.target // activated tab

    // get the div's id
    var divid = $(now_tab).attr('href').substr(1);

    $.getJSON('xxx.php').success(function(data){
        $("#"+divid).text(data.msg);
    });
})

答案 2 :(得分：21)

我想通过Ajax将完全动态的php页面加载到选项卡中。 例如，我希望链接中有$ _GET值，基于它是哪个选项卡 - 如果您的选项卡是动态的，例如基于数据库数据，这将非常有用。 找不到任何可以使用它的东西，但我确实设法编写了一些实际可行的jQuery并完成了我正在寻找的东西。 我是一个完整的jQuery noob，但这就是我如何做到的。

  1. 我创建了一个名为tabajax的新“数据切换”选项（而不仅仅是tab），这使我可以分离出什么是ajax和什么是静态内容。
  2. 我创建了一个基于该数据切换运行的jQuery代码段，它不会弄乱原始代码。

    3. 我现在可以将url.php？value = x加载到我的Bootstrap选项卡中。

    如果您愿意，可以随意使用，代码在

    之下

    jQuery代码：

    $('[data-toggle="tabajax"]').click(function(e) {
    e.preventDefault()
    var loadurl = $(this).attr('href')
    var targ = $(this).attr('data-target')
    $.get(loadurl, function(data) {
        $(targ).html(data)

    });
    $(this).tab('show')
});

    HTML：

    <li><a href="tabs/loadme.php?value=1" data-target='#val1' data-toggle="tabajax">Val 1</a></li>

    所以在这里你可以看到我改变了bootstrap加载的方式，我使用动态ajaxlink的href，然后将一个'data-target'值添加到链接，那应该是你的目标div（tab） -content）。

    因此，在标签内容部分中，您应该为此示例创建一个名为val1的空div。

    空Div（目标）：

    <div class='tab-pane' id='val1'><!-- Ajax content will be loaded here--></div>

    希望这对某人有用：）

答案 3 :(得分：9)

我建议将 uri 放入tab-pane元素中，它允许利用Web框架反向url 功能。它还允许完全依赖于标记

<ul class="nav nav-tabs" id="ajax_tabs">
  <li class="active"><a data-toggle="tab" href="#ajax_login">Login</a></li>
  <li><a data-toggle="tab" href="#ajax_registration">Registration</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="ajax_login"
    data-target="{% url common.views.ajax_login %}"></div>
  <div class="tab-pane" id="ajax_registration"
    data-target="{% url common.views.ajax_registration %}"></div>
</div>

这是javascript 

function show_tab(tab) {
    if (!tab.html()) {
        tab.load(tab.attr('data-target'));
    }
}

function init_tabs() {
    show_tab($('.tab-pane.active'));
    $('a[data-toggle="tab"]').on('show', function(e) {
        tab = $('#' + $(e.target).attr('href').substr(1));
        show_tab(tab);
    });
}

$(function () {
    init_tabs();
});

我加载了活动标签，只有在尚未加载时才加载标签

答案 4 :(得分：1)

您的代码用户1177811中存在错误。

必须是$('[data-toggle="tabajax"]')。

还有改进的余地。与$ .get（）不同，.load（）方法允许我们指定要插入的远程文档的一部分。所以我添加了#content来加载远程页面的内容div。

$this.tab('show');现在只在响应成功时被调用。

这是代码 

 $('[data-toggle="tabajax"]').click(function(e) {
        e.preventDefault();
        $this = $(this);
        var loadurl = $(this).attr('href');
        var targ = $(this).attr('data-target');
        $(targ).load(loadurl+'?ajax=true #content', function(){
            $this.tab('show');
        });
    });

答案 5 :(得分：1)

我是这样做的。我使用了一个属性data-href，它保存了我想在节目中加载的网址。除非您将$('#tab').data('loaded');设置为0或将其删除，否则不会重新加载已加载的数据。它还通过检测第一个斜杠的位置来处理相对与绝对URL。我不确定与所有浏览器的兼容性，但它适用于我们的情况并允许我们正在寻找的功能。

使用Javascript：

//Ajax tabs
$('.nav-tabs a[data-href][data-toggle="tab"]').on('show', function(e) {
  var $this = $(this);
  if ($this.data('loaded') != 1)
  {
    var firstSlash = $this.attr('data-href').indexOf('/');
    var url = '';
    if (firstSlash !== 0)
      url = window.location.href + '/' + $this.attr('data-href');
    else
      url = $this.attr('data-href');
    //Load the page

    $($this.attr('href')).load(url, function(data) {
      $this.data('loaded', 1);
    });
  }
});

HTML：

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#js-tab1" data-href="tab1.php" data-toggle="tab">Tab 1</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="js-tab1">
      <p>
        This content isn't used, but instead replaced with contents of tab1.php.
      </p>
      <p>
        You can put a loader image in here if you want
      </p>
    </div>
  </div>
</div>

答案 6 :(得分：1)

这是我找到的解决方案 - 并根据我的需要进行了修改：

$("#tabletabs").tab(); // initialize tabs
$("#tabletabs").bind("show", function(e) { 
var contentID = $(e.target).attr("data-target");
var contentURL = $(e.target).attr("href");
if (typeof(contentURL) != 'undefined') { // Check if URL exists
$(contentID).load(contentURL, function(){
$("#tabletabs").tab(); // reinitialize tabs
});
} else {
$(contentID).tab('show');
}
});
$('#tabletabs a:first').tab("show"); // Load and display content for first tab
});

答案 7 :(得分：1)

这是使用Razor的MVC示例。它将与名为_SearchTab.cshtml和_SubmissionTab.cshtml

的两个部分视图进行交互

请注意，我将选项卡的id命名为与partials相同。

<强>标记： 

<!-- Nav tabs -->
<ul id="tabstrip" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#_SubmissionTab" role="tab" data-toggle="tab">Submission</a></li>
    <li><a href="#_SearchTab" role="tab" data-toggle="tab">Search</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane fade in active" id="_SubmissionTab">@Html.Partial("_SubmissionTab")</div>
    <div class="tab-pane fade" id="_SearchTab"></div>
</div>

@Html.Partial将在页面加载时在活动标签页上请求页面

<强>脚本： 

<script>
    $('#tabstrip a').click(function (e) {
        e.preventDefault()
        var tabID = $(this).attr("href").substr(1);
        $("#" + tabID).load("/@ViewContext.RouteData.Values["controller"]/" + tabID)
        $(this).tab('show')
    })
</script>

load函数将在单击每个选项卡时执行ajax请求。至于请求的路径，您会注意到@ViewContext.RouteData.Values["controller"]电话。它只是获取当前视图的控制器，假设部分视图位于那里。

<强>控制器： 

    public ActionResult _SubmissionTab()
    {
        return PartialView();
    }

    public ActionResult _SearchTab()
    {
        return PartialView();
    }

需要控制器将load请求转发到正确的部分视图。

答案 8 :(得分：1)

这是Bootstrap选项卡Ajax示例，您可以使用它... 

<ul class="nav nav-tabs tabs-up" id="friends">
      <li><a href="/gh/gist/response.html/3843293/" data-target="#contacts" class="media_node active span" id="contacts_tab" data-toggle="tabajax" rel="tooltip"> Contacts </a></li>
      <li><a href="/gh/gist/response.html/3843301/" data-target="#friends_list" class="media_node span" id="friends_list_tab" data-toggle="tabajax" rel="tooltip"> Friends list</a></li>
      <li><a href="/gh/gist/response.html/3843306/" data-target="#awaiting_request" class="media_node span" id="awaiting_request_tab" data-toggle="tabajax" rel="tooltip">Awaiting request</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
      <div class="tab-pane" id="friends_list">

      </div>
      <div class="tab-pane  urlbox span8" id="awaiting_request">

      </div>
    </div>

这是AJAX调用

$('[data-toggle="tabajax"]').click(function(e) {
    var $this = $(this),
        loadurl = $this.attr('href'),
        targ = $this.attr('data-target');

    $.get(loadurl, function(data) {
        $(targ).html(data);
    });

    $this.tab('show');
    return false;
});

答案 9 :(得分：0)

我使用这个功能，它非常好，因为她阻止你在返回该标签时再次加载ajax。

提示：在标签href上，只需输入目的地。将其添加到页脚：

$("#templates_tabs").tabs({
    beforeLoad: function( event, ui ) {
      if (ui.tab.data("loaded")) {
          event.preventDefault();

          return;
      }


      ui.ajaxSettings.cache = false,
      ui.jqXHR.success(function() {

          ui.tab.data( "loaded", true );
      }),
      ui.jqXHR.error(function () {


          ui.panel.html(
          "Not possible to load. Are you connected?");
      });
    }
  });
相关问题
最新问题