我正在开发一个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>
我将数据从控制器传递到jsp页面。现在我想做的是 -
tab1 div和tab2 div标签。最初，在任何刷新之前，我想使我的背景灰显，然后显示刷新图像。刷新完成后，该刷新图像将消失，并且应刷新两个div tab1 div和tab2 div。TEST1标签上，然后进行了刷新，那么它应该在TEST1标签上，但假设我在TEST2标签上，然后是正在刷新，然后它应该在TEST2标签上。我已尝试编码，如我的jsfiddle和jquery中所示，我编码的只是尝试刷新tab1 div，但不知何故tab1 div没有反映最新的数据。它始终显示我第一次点击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始终保持相同的旧数据，我看到第一次击中网址。我的jquery有什么问题吗？
还有如何为我的两个标签添加刷新？
更新： -
我注意到一件非常奇怪的事情，如果我删除content div and tab1 div并刷新container div那么我可以在刷新后看到我的更新数据并且它工作正常但是如果我添加{{ 1}}并尝试刷新content and tab1 div，然后它根本不起作用。所以有些事情是肯定的..
答案 0 :(得分：0)
您需要等到收到数据。但如果你的计时器足够长，这应该没关系。
所以，请将您的代码更改为以下内容：
$(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);
答案 1 :(得分：0)
根据要求，您可以尝试使用以下等效项替换ajax请求：
//Create a refresh function:
function refresh(){
// SHOW overlay
$('#overlay').show();
$('#tab1').load('test4.jsp #tab1', function(){
// HIDE the overlay:
$('#overlay').hide();
});
}