Tôi đã sử dụng bootstrap-tabs.js và nó đã hoạt động hoàn hảo.Cách sử dụng tải AJAX với các tab Bootstrap?
Nhưng tôi không tìm thấy thông tin về cách tải nội dung thông qua yêu cầu AJAX.
Vì vậy, cách sử dụng tải AJAX với bootstrap-tabs.js?
Tôi đã sử dụng bootstrap-tabs.js và nó đã hoạt động hoàn hảo.Cách sử dụng tải AJAX với các tab Bootstrap?
Nhưng tôi không tìm thấy thông tin về cách tải nội dung thông qua yêu cầu AJAX.
Vì vậy, cách sử dụng tải AJAX với bootstrap-tabs.js?
Bạn có thể nghe các nội dung tải change
sự kiện và ajax trong xử lý sự kiện
$('.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);
});
})
Trong Bootstrap 2.0 và lên bạn phải liên kết với sự kiện 'show' để thay thế.
Dưới đây là một ví dụ HTML và 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
});
});
});
Tôi đã viết một bài về nó ở đây: http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-ajax-load-content/
Tôi muốn tải các trang php năng động đầy đủ vào các tab thông qua Ajax. Ví dụ: tôi muốn có các giá trị $ _GET trong các liên kết, dựa trên tab nào - điều này rất hữu ích nếu các tab của bạn là động, dựa trên dữ liệu cơ sở dữ liệu chẳng hạn. Không thể tìm thấy bất kỳ thứ gì hoạt động với nó nhưng tôi đã viết một số jQuery thực sự hoạt động và thực hiện những gì tôi đang tìm kiếm. Tôi là một jQuery noob hoàn chỉnh nhưng đây là cách tôi đã làm.
Tôi hiện có thể tải url url.php? Value = x vào các tab Bootstrap của tôi.
Hãy sử dụng nó nếu bạn muốn, mã dưới
đangjQuery:
$('[data-toggle="taba"]').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>
Vì vậy, ở đây bạn có thể thấy rằng tôi đã thay đổi cách tải bootstrap, tôi sử dụng href cho ajaxlink động và sau đó thêm một giá trị 'data-target' vào liên kết thay vào đó, đó sẽ là div mục tiêu của bạn (tab-content).
Vì vậy, trong phần nội dung tab của bạn, bạn nên tạo một div trống có tên là val1 cho ví dụ này.
Rỗng Div (mục tiêu):
<div class='tab-pane' id='val1'><!-- Ajax content will be loaded here--></div>
Hy vọng điều này rất hữu ích cho một ai đó :)
Cảm ơn bạn! Tôi muốn một giải pháp giống như của bạn để tôi không phải đặt giá trị HREF thành '#' để cho phép một cái gì đó thân thiện hơn với SEO. Đây là giải pháp duy nhất tôi đã tìm thấy cho phép điều đó. –
Có một lỗi trong user1177811 mã của bạn.
Nó phải là $('[data-toggle="tabajax"]')
.
Ngoài ra còn có chỗ để cải thiện. Phương thức .load(), không giống như $ .get(), cho phép chúng ta chỉ định một phần của tài liệu từ xa được chèn vào. Vì vậy, tôi đã thêm #content
để tải div nội dung của trang từ xa.
$this.tab('show');
hiện chỉ được gọi, khi phản hồi thành công.
Đây là mã
$('[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');
});
});
Điều này hoạt động ra khỏi hộp. Nhưng tôi không phải là fan của 'loadurl + '? Ajax = true # content'', tôi chỉ sử dụng' loadurl'. –
Khi tab được nhấp và yêu cầu Ajax được thực hiện, bạn không thể thực hiện yêu cầu ajax lần nữa khi bạn nhấp vào lần thứ hai. Tôi là người duy nhất phải đối mặt với điều này? – Sobiaholic
Tôi đề nghị để đưa uri vào tab-pane
yếu tố, nó cho phép tận dụng lợi thế của web khuôn khổ ngược url fonctionnalities. Nó cũng cho phép phụ thuộc hoàn toàn vào đánh dấu
<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>
Và đây là 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();
});
tôi tải tab hoạt động, và tải một tab duy nhất nếu nó chưa được nạp
có lý do đặc biệt nào khiến bạn cắt thẻ băm và thêm lại thẻ không? sẽ không '$ ($ (e.target) .attr ('href'))' làm thủ thuật? – lordvlad
Vâng vâng, không có lý do –
đây là cách tôi làm. Tôi sử dụng thuộc tính data-href
chứa url tôi muốn tải trên chương trình. Thao tác này sẽ không tải lại dữ liệu đã được tải trừ khi bạn đặt $('#tab').data('loaded');
thành 0 hoặc xóa dữ liệu đó. Nó cũng xử lý các url tương đối so với tuyệt đối bằng cách phát hiện vị trí của dấu gạch chéo đầu tiên. Tôi không chắc chắn về khả năng tương thích với tất cả các trình duyệt nhưng nó hoạt động trong tình huống của chúng tôi và cho phép các chức năng chúng tôi đang tìm kiếm.
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>
Đây là một giải pháp tôi đã tìm thấy - và sửa đổi cho phù hợp với nhu cầu của tôi:
$("#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
});
Đây là một ví dụ MVC sử dụng Dao cạo. Nó sẽ tương tác với hai chế độ xem một phần có tên: _SearchTab.cshtml
và _SubmissionTab.cshtml
Lưu ý rằng tôi đang đặt tên id của các tab giống như partials.
Markup:
<!-- 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>
Các @Html.Partial
sẽ yêu cầu trang trên tab hoạt động trên tải trang
Script:
<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>
Chức năng load
sẽ thực hiện một ajax yêu cầu như mỗi tab được nhấp vào. Đối với đường dẫn nào được yêu cầu, bạn sẽ thấy một cuộc gọi @ViewContext.RouteData.Values["controller"]
. Nó chỉ đơn giản là có bộ điều khiển của khung nhìn hiện tại giả sử các khung nhìn từng phần nằm ở đó.
Bộ điều khiển:
public ActionResult _SubmissionTab()
{
return PartialView();
}
public ActionResult _SearchTab()
{
return PartialView();
}
Bộ điều khiển là cần thiết để chuyển tiếp yêu cầu load
đến xem một phần thích hợp.
Dưới đây là tab Bootstrap Ajax Ví dụ, bạn có thể sử dụng nó ...
<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>
và đây là cuộc gọi 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;
});
tôi sử dụng chức năng này và nó thực sự thoải mái vì cô ngăn chặn của bạn từ tải ajax một lần nữa khi trở lại tab đó.
Mẹo: trên tab href, chỉ cần đặt điểm đến. Thêm phần này vào chân trang:
$("#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?");
});
}
});
nó không hoạt động với tôi. – assaqqaf
phần nào không hoạt động? xử lý đã không được thực hiện? – ukessi
Theo [Tài liệu jQuery] (http://api.jquery.com/change/): "Sự kiện thay đổi được gửi đến một phần tử khi giá trị của nó thay đổi. Sự kiện này được giới hạn ở các thành phần ,