我有一个功能性 JSP 页面,它接受 URL 参数并使用基于这些参数的信息更新页面上的表格。
我有一组不同的选项卡,它们将所述 URL 参数传递到它们所在的页面,以便它重新加载并显示这些新数据。
我一直在尝试使用 jQuery .load 和 .ajax 方法,以便我可以将这些 URL 参数传递到服务器上的页面,然后仅通过 AJAX 提供表格,而不是进行整个页面刷新。
我遇到的问题是,有时页面会刷新,但我无法弄清楚为什么会发生这种情况。
这是 jQuery:
$('ul#coverTabs > li').live('click', function() {
// Removes default class applied in HTML and onClick adds 'currentTab' class
$(".currentTab").removeClass("currentTab");
$(this).addClass("currentTab");
// Find href of current tab
var $tabValue = $('ul#coverTabs > li.currentTab > a').attr('href');
// Load new table based on href URL variables
$('#benefit').load($tabValue + ' #' + 'benefit');
/*$.ajax({
cache: false,
dataType: "html",
url: $tabValue,
success: function(data) {
//var $tableWrap = $('#benefit');
//$('.benefitWrap').append($('.benefitWrap'));
//alert($tableWrap);
},
});*/
return false;
});
以下是选项卡的 HTML:
<ul id="coverTabs">
<li class="currentTab"><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&productPolicyId=748#a1">Individual</a></li>
<li><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&productPolicyId=749#a1">Couple</a></li>
<li><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&productPolicyId=750#a1">Family</a></li>
<li><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&productPolicyId=751#a1">Single Parent Family</a></li>
</ul>
当用户点击时你返回 falseli
元素,它不会做任何事情来阻止a
内的元素li
元素从射击。您需要覆盖它们的默认操作以防止它们触发:
$('ul#coverTabs > li > a').click(function(event) {
event.preventDefault();
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)