我正在从事一个 Web 开发元素,我在其中设计了水平选项卡式设计,然后在单击每个选项卡后,我会显示表格。
目前我的设计中只有两个选项卡。只要我单击 TEST1
选项卡,它就会显示 Table1
但如果我单击 TEST2
选项卡,它会显示另一个具有不同列和数据的表Table2
并且工作正常。
这是我的 jsfiddle .
这是我的 test4.jsp 设计 -
<div id='headerDivDash'>
<h1 id='topHeaderDash'>
some_image
</h1>
</div>
<ul id="tabs">
<li><a href="#" name="tab1">TEST1</a></li>
<li><a href="#" name="tab2">TEST2</a></li>
</ul>
<div id="content">
<div id="tab1">
<h2>Test 1</h2>
<div class="container">
<c:forEach var="e" items="${testing.machines}">
<div class="component">
<h3>
For
<c:out value="${e.key}" />
</h3>
<table class="overflow-y">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<c:forEach var="m" items="${e.value}">
<tr>
<th>${m.fName}</th>
<td class="color-changer">${m.lName}</td>
<td>${m.address}</td>
<td>${m.email}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</c:forEach>
</div>
</div>
<div id="tab2">
<h2>Test 2</h2>
<div class="container">
<c:forEach var="e" items="${testing.machines}">
<div class="component">
<h3>
For
<c:out value="${e.key}" />
</h3>
<table class="overflow-y">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<c:forEach var="m" items="${e.value}">
<tr>
<th>${m.fName}</th>
<td class="color-changer">${m.lName}</td>
<td>${m.address}</td>
<td>${m.email}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</c:forEach>
</div>
</div>
</div>
<div class="footer">© Some value</div>
我正在将数据从 Controller 传递到 jsp 页面。现在我想做的是 -
- 我想使用 AJAX 刷新每 30 秒刷新我的两个选项卡,即
tab1 div
和tab2 div
。最初,在任何刷新之前,我想将我的背景变灰然后显示刷新图像。刷新完成后,刷新图像将消失,两个 divtab1 div
和tab2 div
应该刷新。 - 此外,如果我在
TEST1
选项卡上,然后正在刷新,那么它应该在TEST1
选项卡上,但假设我在TEST2
选项卡,然后刷新正在发生,那么它应该在TEST2
选项卡上。
我已经尝试按照我的 jsfiddle 和下面的 jquery 所示对其进行编码,我编写的代码仅尝试刷新 tab1 div
但不知何故 tab1 div 未反射(reflect)最新数据。它总是显示我第一次点击 url 时看到的旧数据。而且我不确定我在那里做错了什么?
$(document).ready(function(){
// Create overlay and append to body:
$('<div id="overlay"/>').css({
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: $(window).height() + 'px',
opacity:0.4,
background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
}).hide().appendTo('body');
// Execute refresh with interval:
setInterval(refresh, 30 * 1000);
});
//Create a refresh function:
function refresh(){
// SHOW overlay
$('#overlay').show();
// Retrieve data:
$.ajax({
url: 'test4.jsp',
type: 'GET',
success: function(data){
var content = $($.parseHTML(data)).filter("#tab1");
//Replace content inside the div
$('#tab1').replaceWith(content); # this is not updating my tab div with latest data
// HIDE the overlay:
$('#overlay').hide();
}
});
}
我根本看不到我的 tab1
div 正在刷新。我可以看到显示刷新图像,但不知何故 tab1 总是保存相同的旧数据,这是我第一次看到的 url。我的 jquery 有什么问题吗?
还有如何为我的两个选项卡添加刷新?
更新:-
我注意到一件很奇怪的事情,如果我删除 content div 和 tab1 div
并刷新 container div
那么我可以在之后看到更新后的数据刷新,它工作正常,但如果我添加 content 和 tab1 div
并尝试刷新 container div
,那么它根本不起作用。所以肯定有问题..
最佳答案
您需要等到收到数据。但如果您的计时器足够长,这应该无关紧要。
因此,请将您的代码更改为如下内容:
$(document).ready(function(){
// Create overlay and append to body:
$('<div id="overlay"/>').css({
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: $(window).height() + 'px',
opacity:0.4,
background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
}).hide().appendTo('body');
// Execute refresh with interval:
refresh();
});
//Create a refresh function:
function refresh(){
// SHOW overlay
$('#overlay').show();
// Retrieve data:
$.ajax({
url: 'test4.html',
type: 'GET',
success: function(data){
var content = $($.parseHTML(data)).filter("#tab1");
//Replace content inside the div
$('#tab1').replaceWith(content); # this is not updating my tab div with latest data
// HIDE the overlay:
$('#overlay').hide();
setTimeout(refresh, 30 * 1000);
}
});
}
如果这不能替换您的数据,只需 替换此行:
var content = $($.parseHTML(data)).filter("#tab1");
//Replace content inside the div
$('#tab1').replaceWith(content); # this is not updating my tab div with latest data
// HIDE the overlay:
$('#overlay').hide();
setTimeout(refresh, 30 * 1000);
有了这个:
$('#tab1').html(data);
$('#overlay').hide();
setTimeout(refresh, 30 * 1000);
关于jquery - 如何使用 ajax 刷新刷新水平选项卡式设计中的选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22463913/