我知道这是一个重复的问题。但我找不到解决问题的好方法。 我创建了一个包含一些选项卡的JSP页面。我想在用户点击标签时重新加载标签的内容。
<div class="navbar btn-navbar">
<div id="tabs" class="tabbable">
<ul id="myTab" class="nav nav-tabs">
<li><a href="#datacollector" target="main"
data-toggle="tab">Data Collector</a></li>
<li><a href="#fromDB" target="main"
data-toggle="tab">Data Load</a></li>
<li><a href="#fromFile" target="main"
data-toggle="tab">Data Load</a></li>
<li><a href="#email" target="main"
data-toggle="tab">Data Load</a></li>
<li><a href="ajax/DataFieldMapping.jsp" target="main" data-toggle="tab">Data
Map</a></li>
<li><a href="#schedule" target="main" data-toggle="tab">Schedule</a></li>
</ul>
我的剧本应该是什么?
答案 0 :(得分:0)
$('#tab-id-selector').click(function() {
$.ajax({
type:'POST',
url: 'targetUrl',
data: {
'foo': 'bar' //request parameters,In your case may be the tab ID to recognize on the server side that which tab pressed
},
success: function(response) {
//handle the data here ,means set the data where you want
}
});
});
答案 1 :(得分:0)
为什么单击选项卡时需要重新加载内容? 根据要求加载内容是不够的?
$("tab selector").click(function(){
//do ajax-request to fetch data
$.ajax({
url: "/url/to/your/data",
type: "GET",
contentType: "application/json; charset=UTF8",
success: (function (data) {
//load your tab with your new data
}),
error: (function (data) {
})
});
});
答案 2 :(得分:0)
使用jQuery获取数据(使用AJAX)。我猜你已经在使用jQuery UI了。 我假设您要从HTML文件加载内容?
HTML
<div id="tabs">
<ul>
<li><a href="#tabs-1">Data Collector</a></li>
<li><a href="#tabs-2">Data Load</a></li>
<li><a href="#tabs-3">Data Load</a></li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
JavaScript - 像这样的
$( "#tabs" ).tabs({
beforeActivate: function( event, ui ) {
var myData = {
previousTabSelection: 5 // read previous tab data ...
};
$.get('/url/to/your/content.html', myData).done(function(contentHtml){
ui.newPanel.html(contentHtml);
});
// or without params
if(myData.previousTabSelection === 5 ){
ui.newPanel.load('/url/to/your/content.html');
}
}
});