0

検索したい単語を入力できる検索結果ページがあり、クリックしたボタンに基づいて検索結果がグリッド ビューとリスト ビューに表示されます。

グリッド ビュー ラジオ ボタンをクリックすると、ajax リクエストを送信し、グリッド ビューの div#GridView 内に検索結果を入力する Java スクリプト関数を呼び出します。

2秒後、ajaxリクエストを送信してdiv#ListViewに他の結果を入力するために使用したのと同じ関数を呼び出しています。ユーザーはいつでもリストビューまたはグリッドビューに切り替えることができ、表示されるため、これを行っています他のビューでも同じ結果。この時点で ListView は none を表示するように設定されています。List View でも同じことが起こります。

問題は、2 つの ajax リクエストが送信され、読み込みイメージが 2 回表示されるためです。1 つはリスト ビュー用で、もう 1 つはグリッド ビュー用です。

この読み込み中の画像が 2 回表示されるのを防ぐ方法。

返信ありがとう

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に条件を1つ追加するだけで、問題を整理する問題が1つだけあります

すなわち

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 に答える