加载图片在ajax请求上显示两次

我有一个搜索结果页面，人们可以输入他们想要搜索的词，搜索结果将基于他们点击的按钮显示在网格视图和列表视图中。加载图片在ajax请求上显示两次

如果点击了网格视图单选按钮，我打电话给一个java脚本函数，它发送一个jax请求，并在网格视图中填充div＃GridView内的搜索匹配项。

两秒钟后，我调用了我用来发送ajax请求来填充div＃ListView和其他结果的相同函数。我这样做是因为用户可以在任何时间切换到列表视图或网格视图，其他观点将会表现出相同的结果。此时ListView被设置为无显示。列表视图也会发生同样的情况。

问题是因为发送了两个ajax请求，加载图像显示两次，一次是列表视图，另一次是网格视图。

如何防止此加载图像显示两次。

感谢您的回复

HTML代码

<body> 
    <input type="text" name="txtSearchTerm" id="txtSearchTerm"/>  
    <input type="radio" name="rdoView" onclick="PopulateSearchResult('ListView')"/>List View 
    <input type="radio" name="rdoView" onclick="PopulateSearchResult('GridView')"/>Grid View 
    <div id="SearchResult"> 
     <div id="GridView"></div> 
     <div id="ListView"></div> 
    </div> 
<body>

的Javascript

function PopulateSearchResult(pView) 
{ 
    (pView == 'ListView')?OtherView = 'GridView':OtherView = 'ListView'; 

    $('#'+pView).show(); 
    $('#'+OtherView).show(); 

    DisplayMsg(pView); 

    setTimeout("DisplayMsg('"+OtherView+"')", 2000); 
} 

function DisplayMsg(pView) 
{ 
    url = '/'; 

    $('#SearchResult').html('<div><img src="loading.gif"/></div>');  

    $.get(
     url, 
     { 
      "SearchFor" : $('txtSearchTerm').val(), 
      "DisplayIn" : pView   
     }, 
     function(responseText){ 
      $('#SearchResult').html(responseText);  
     }, 
     "html" 
    );  
}

来源

2012-12-06 ArrayOutOfBound

将一个参数添加到DisplayMsg（）中，该参数表示是否显示加载图像。在初始调用时将其设置为“true”，在定时器调用中将其设置为“false”。 – Barmar

结果将以这样的方式显示，即它所处的单选按钮。如果列表视图在我更改搜索文本时处于活动状态，它将填充到列表视图中，反之亦然 – ArrayOutOfBound

你只有一个问题要解决你的问题，只是在你的jQuery

即增加一个条件

function DisplayMsg(pView) 
{ 
    url = '/'; 
if($("txtSearchTerm").find('img').attr('id')) != 'loading-img'){ 
    $('#SearchResult').html('<div><img id="loading-img" src="loading.gif"/></div>');  
} 
    $.get(
     url, 
     { 
      "SearchFor" : $('txtSearchTerm').val(), 
      "DisplayIn" : pView   
     }, 
     function(responseText){ 
      $('#SearchResult').html(responseText);  
     }, 
     "html" 
    );  
}

来源

2012-12-06 09:33:15

function DisplayMsg(pView) 
{ 
    url = '/'; 
    var temp = $('#SearchResult').html(); 
    if(temp != '<div><img src="loading.gif"/></div>') 
    { 
     $('#SearchResult').html('<div><img src="loading.gif"/></div>');  
    } 
    $.get(`enter code here` 
     url, 
     { 
      "SearchFor" : $('txtSearchTerm').val(), 
      "DisplayIn" : pView   
     }, 
     function(responseText){ 
      $('#SearchResult').html(responseText);  
     }, 
     "html" 
    );  
}

只需在显示加载图像时添加该条件即可。

来源

2012-12-08 06:37:38

加载图片在ajax请求上显示两次

回答

相关问题