jQuery的.load方法导致页面刷新的AJAX [英] jQuery .load Method causing page refresh AJAX

问题描述

我有一个接受URL参数，并更新表的页面上根据这些参数信息的功能JSP页面。

我有一组不同的选项卡的这通说URL paraneters他们都在，因此随后的页面重新加载和显示这个新的数据。

我一直在尝试使用jQuery的.load和阿贾克斯的方法，这样我可以通过这些URL参数服务器上的页面，然后只会向上通过AJAX的表，而不是做一整页刷新。

我遇到的问题是，有时在页面不刷新，我不能工作了，为什么发生这种情况。

下面是jQuery的：

  $（'＃UL＆coverTabs GT;李）。生活（点击，函数（）{

    //删除HTML中的默认应用类的onClick增加了currentTab级
    $（currentTab。）removeClass移除（currentTab）;
    $（本）.addClass（currentTab）;

    //查找当前标签的HREF
    变量$ tabValue = $（'微升＃coverTabs＆GT; li.currentTab＆gt;一种'）。ATTR（'的href'）;

    //基于HREF URL变量装入新表
    $（'＃好处'）负载（$ tabValue +＃+惠）。

    / * $。阿贾克斯（{
      缓存：假的，
      数据类型：HTML，
      网址：$ tabValue，
      成功：功能（数据）{
         //变量$ tableWrap = $（'＃好处'）;

         //$('.benefitWrap').append($('.benefitWrap'））;

         //警报（$ tableWrap）;
      }，
    }）; * /


    返回false;

}）;
 

下面是的HTML标签：

 ＆LT; UL ID =coverTabs＆GT;
    ＆LT;李类=currentTab＆GT;＆LT;一href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&amp;productPolicyId=748#a1">Individual</a></li>
    ＆LT;李＆GT;＆LT;一href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&amp;productPolicyId=749#a1">Couple</a></li>
    ＆LT;李＆GT;＆LT;一href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&amp;productPolicyId=750#a1">Family</a></li>
    ＆LT;李＆GT;＆LT;一href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&amp;productPolicyId=751#a1">Single单亲家庭＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
 

解决方案

正在返回false，当用户点击了里元素，它不会做任何事情上prevent的在 A 元素里从射击元素。你需要重写其默认操作为$ P $从发射pvent他们：

  $（'＃UL＆coverTabs GT;李＆gt;在'）。点击（函数（事件）{
    。事件preventDefault（）;
}
 

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>

解决方案

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(); 
}

这篇关于jQuery的.load方法导致页面刷新的AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！