Метод jQuery .load, вызывающий обновление страницы AJAX

Question

У меня есть функциональная страница 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&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

Вы возвращаете false, когда пользователь нажимает на элемент li, что ничего не делает для предотвращения запуска элемента a в элементе li. Вам нужно переопределить действие по умолчанию, чтобы предотвратить их запуск:

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

Answer 2

Вы должны запретить действие по умолчанию (переход по ссылке в URL) в обработчике кликов:

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

В вашем коде действие по умолчанию не запрещено, поэтому, когда пользователь щелкает ссылку, браузер начинает переходить по URL HREF.