I have a functional JSP page that accepts URL parameters and updates the table on the page with information based on these parameters.
I have a set of different tabs that pass the specified paranoia URLs to the page on which they are located, so it reloads and displays this new data.
I am trying to use the jQuery.load and .ajax methods so that I can pass these URL parameters to a page on the server and then only serve the table via AJAX, and not update the whole page.
The problem is that sometimes the page refreshes, and I cannot understand why this is happening.
Here is jQuery:
$('ul#coverTabs > li').live('click', function() {
$(".currentTab").removeClass("currentTab");
$(this).addClass("currentTab");
var $tabValue = $('ul#coverTabs > li.currentTab > a').attr('href');
$('#benefit').load($tabValue + ' #' + 'benefit');
return false;
});
Here is the HTML for the tabs:
<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>