Question

我有一个搜索结果页面，人们可以在其中输入他们想要搜索的单词，搜索结果将根据他们点击的按钮显示在网格视图和列表视图中。

如果点击网格视图单选按钮，我正在调用一个java脚本函数，该函数发送一个Ajax请求并在网格视图中填充div＃GridView内的搜索匹配。

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

问题是因为发送了两个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"
    );      
}

Answer 1

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

只需在显示加载图片时添加该条件。

Answer 2

只有一个问题就是解决问题，只需在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"
    );      
}

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

2 个答案: