我正在开发一个Spring MVC控制器项目,其中我正在从控制器传递数据到JSP页面。我的JSP页面具有水平选项卡设计,在单击每个选项卡后,我会显示表格。
目前我的设计中只有两个选项卡。当我单击“TEST1”选项卡时,它会显示“Table1”,但如果我单击“TEST2”选项卡,则会显示另一个具有不同列和数据的表格,即“Table2”,并且它可以正常工作。
这是我的jsfiddle。
这是我的test4.jsp设计 -
我正在从控制器传递数据到jsp页面。现在我想做的是 -
我无法看到我的
另外,我注意到一件很奇怪的事情,如果我删除
我怀疑这是因为我的css问题,我想在jsfiddle中展示。有人能帮我解决这个问题吗?
目前我的设计中只有两个选项卡。当我单击“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页面。现在我想做的是 -
- 我想使用AJAX刷新每30秒刷新我的两个选项卡,即
tab1 div
和tab2 div
。 - 此外,如果我在
TEST1
选项卡上,然后发生了刷新,那么它应该在TEST1
选项卡上,但是如果我在TEST2
选项卡上,然后发生了刷新,那么它应该在TEST2
选项卡上。
以下是我为tab1
刷新编写的jquery代码,不确定如何将其用于tab2
,但在刷新后,我仍然看到旧数据,而不是显示最新数据。
$(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
,那么它根本不起作用。所以肯定出了问题。我怀疑这是因为我的css问题,我想在jsfiddle中展示。有人能帮我解决这个问题吗?