jQuery .load Method causing page refresh AJAX

Question

I have a functional JSP page that accepts URL parameters and updates a table on the page with info based on those parameters.

I have a set of different tabs which pass said URL paraneters to the page they are on so it then re-loads and displays this new data.

I have been trying to use jQuery .load and .ajax methods so that i can pass these URL parameters to the page on the server and then only serve up the table via AJAX rather than doing a whole page refresh.

The problem i am having is that sometimes the page does refresh and i cannot work out why this is happening.

Here is the 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;       

});

Here is the HTML for the tabs:

<ul id="coverTabs">
    <li class="currentTab"><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&amp;productPolicyId=748#a1">Individual</a></li>
    <li><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&amp;productPolicyId=749#a1">Couple</a></li>
    <li><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&amp;productPolicyId=750#a1">Family</a></li>
    <li><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&amp;productPolicyId=751#a1">Single Parent Family</a></li>
</ul>

Answer 1

You are returning false when the user clicks on the li element, which doesn't do anything to prevent the a element within the li element from firing. You need to override their default action to prevent them from firing:

$('ul#coverTabs > li > a').click(function(event) {   
    event.preventDefault(); 
}

Answer 2

You should prevent the default action (navigation to link url) in click handler:

<script>
$("a").click(function(event) {
  event.preventDefault();
  // your actions
});
</script>

In your code the default action is not prevented, so when the user clicks the link, browser starts navigating to the HREF URL.

Answer 3

So i have tried splitting this out into two click functions. One on the li and one on the a:

    $('ul#coverTabs > li').live('click', function() {       

    // Find the current tab
    var $oldTab = $('ul#coverTabs > li').index ($('.currentTab'));
    var $oldTab = $oldTab + 1

    // Removes default class applied in HTML and onClick adds 'currentTab' class
    $(".currentTab").removeClass("currentTab");
    $(this).addClass("currentTab"); 

    // Find the current tab
    var $newTab = $('ul#coverTabs > li').index ($('.currentTab'));
    var $newTab = $newTab + 1

    // If tab has changed trigger highlighting of default column
    if ($newTab != $oldTab) {
        $defaultCell.trigger('click');
    };

    // Find number of li
    var $tabIndex = $(this).parent().children().index ($(this));
    var $tabIndex = $tabIndex + 1;       

    // Find the current column
    var $currentLevel = $('table#benefit > thead > tr > th').index ($('.highLight'));

    // Find the current tab
    var $currentTab = $('ul#coverTabs > li').index ($('.currentTab'));
    var $currentTab = $currentTab + 1       

    // Retrieve cost data on tab change

    return false;       

});

$('ul#coverTabs > li > a').click(function(event) {   

    // 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');           

    return false;   

});

Now the .load does not work at all. Thanks for your help thus far.