CODEWITHSUNDEEP
phpjavascriptjqueryhtml
ArrayOutOfBound
ArrayOutOfBound

Reputation: 2618

Loading Image displayed twice on ajax request

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 reply

HTML 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>

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

Upvotes: 0

Views: 472

Answers (2)

Akshay Jindal
Akshay Jindal

Reputation: 385

You have only one problem to sort out your problem just add one condition in your jquery

i.e.

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

Upvotes: 0

Ruchira Shree
Ruchira Shree

Reputation: 163

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

Just add that condition while displaying loading image.

Upvotes: 1

Related Questions