I have a Search Result Page where people can enter word they would like to search and the search results will be displayed in grid view and list view based on the button they click. If the Grid View radio button is clicked I am calling a java script function which sends ajax request and populate the search matches inside div#GridView in grid view.After two seconds I am calling the same function which I used to send ajax request to populate the div#ListView with other result.I am doing this because user can switch to list view or grid view at any point of time and its going to show same result in other view. At this point ListView is set to display none.The same thing happens for List View. The problem is because two ajax request are sent the loading image is displayed twice, one for list view and other for grid view.How to prevent this loading image from displaying twice.Thanks for replyHTML Code \[code\]<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>\[/code\]Javascript\[code\]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="http://stackoverflow.com/questions/13739419/loading.gif"/></div>'); $.get( url, { "SearchFor" : $('txtSearchTerm').val(), "DisplayIn" : pView }, function(responseText){ $('#SearchResult').html(responseText); }, "html" ); }\[/code\]
Loading Image displayed twice on ajax request
- Thread starter m.g.m
- Start date