0

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

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

两秒钟后，我调用了与发送 ajax 请求相同的函数，以使用其他结果填充 div#ListView。我这样做是因为用户可以在任何时间点切换到列表视图或网格视图，并且它会显示在其他视图中的结果相同。此时ListView设置为不显示。同样的事情发生在List View上。

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

2 回答 2

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

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

于 2012-12-08T06:37:38.800 回答
0

您只有一个问题可以解决您的问题只需在 jquery 中添加一个条件

IE

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-06T09:33:15.947 回答