Php 加载根据ajax请求显示两次的图像_Php_Javascript_Jquery_Html

Php 加载根据ajax请求显示两次的图像

php javascript jquery html

Php 加载根据ajax请求显示两次的图像,php,javascript,jquery,html,Php,Javascript,Jquery,Html,我有一个搜索结果页面，人们可以在其中输入他们想要搜索的单词，搜索结果将根据他们单击的按钮显示在网格视图和列表视图中如果单击Grid View单选按钮，我将调用一个java脚本函数，该函数将发送ajax请求并在Grid View中的div#GridView中填充搜索匹配项两秒钟后，我调用了我用来发送ajax请求的同一个函数，用其他结果填充div#ListView。我这样做是因为用户可以在任何时间点切换到列表视图或网格视图，并且它将在其他视图中显示相同的结果。此时，ListView被设置为不显示

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

如果单击Grid View单选按钮，我将调用一个java脚本函数，该函数将发送ajax请求并在Grid View中的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"
    );      
}

函数填充搜索结果（pView）
{
（pView=='ListView'）？OtherView='GridView'：OtherView='ListView'；
$（'#'+pView）.show（）；
$（'#'+其他视图）.show（）；
DisplayMsg（pView）；
setTimeout（“DisplayMsg（““+OtherView+”）”，2000）；
}
函数DisplayMsg（pView）
{
url='/'；
$（'#SearchResult'）.html（''）；
美元(
网址，
{
“SearchFor”：$（'txtSearchTerm'）.val（），
“DisplayIn”：pView
},
函数（responseText）{
$（'#SearchResult'）.html（responseText）；
},
“html”
);      
}

您只有一个问题需要解决，只需在jquery中添加一个条件即可

i、 e

函数DisplayMsg（pView）
{
url='/'；
if（$（（“txtSearchTerm”）.find（'img'）.attr（'id'））！='loading img'）{
$（'#SearchResult'）.html（''）；
}
美元(
网址，
{
“SearchFor”：$（'txtSearchTerm'）.val（），
“DisplayIn”：pView
},
函数（responseText）{
$（'#SearchResult'）.html（responseText）；
},
“html”
);      
}

功能显示消息（pView）
{
url='/'；
var temp=$（'#SearchResult'）.html（）；
如果（温度！=''）
{
$（'#SearchResult'）.html（''）；
}
$.get（`在此处输入代码`
网址，
{
“SearchFor”：$（'txtSearchTerm'）.val（），
“DisplayIn”：pView
},
函数（responseText）{
$（'#SearchResult'）.html（responseText）；
},
“html”
);      
}

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

向

DisplayMsg（）

添加一个参数，说明是否显示加载图像。在初始调用中将其设置为

true

，在计时器调用中将其设置为

false

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

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

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