Loading 이미지가 아약스 요청시 두 번 표시됩니다.

사람들이 검색 할 단어를 입력 할 수있는 검색 결과 페이지가 있으며 클릭 한 단추를 기준으로 검색 결과가 격자보기 및 목록보기로 표시됩니다.Loading 이미지가 아약스 요청시 두 번 표시됩니다.

격자보기 라디오 버튼을 클릭하면 자바 스크립트 함수를 호출하여 ajax 요청을 보내고 div # GridView 내의 일치 항목을 격자보기로 채 웁니다.

2 초 후에 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>

자바 스크립트

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

Loading 이미지가 아약스 요청시 두 번 표시됩니다.

답변

관련 문제