CODEWITHSUNDEEP
javascriptjqueryajax
Sohan Patel
Sohan Patel

Reputation: 183

Jquery ajax search loading animation does not stop

I've wrote following code for searching via ajax. When key up fired, an ajax request is made after 500ms. But the searching animation doesn't stop (hide() method).

$('#mainsearch .searchinput').keyup(function(e) {
    if (e.which !== 0) {
        var searchval = $(this).val().trim();
        if(aSearch[searchval]) {
            $('#mainsearch #sugbox #sugres').html(aSearch[searchval]);
        }else if(prevs !== searchval) {
            prevs = searchval;
            clearTimeout($.data(this, 'timer'));
            var wait = setTimeout(function() {search(searchval)}, 500);
            $(this).data('timer', wait);
        }
    }
});

function search(searchval) {
    console.log("searching for "+searchval)
    if(lastrequest && lastrequest.readystate != 4){ // abort past requests
        lastrequest.abort();
        lastrequest = null;
        delete lastrequest;
        $('#mainsearch #finding').hide();
    }

    if(searchval != "") { // make an ajax call

    lastrequest = $.ajax({
        url:"/ajaxsearch.php?key_word="+searchval,
        type: "GET",
        dataType:'json',
        cache:true,

        beforeSend:function() {
            $('#mainsearch #finding').delay(400).show(0);
        },

        complete: function(jqXHR, status){
            console.log('complete');
            $('#mainsearch #finding').hide();
        },

        success:function(result){
            $('#mainsearch #finding').hide();
            if(result.length > 0 ) {
                var outp = searchParse(result);
                $('#mainsearch #sugbox #sugres').html(outp);
                aSearch[searchval] = outp;
            } else 
            $('#mainsearch #sugbox #sugres').html('<li><a href="#"> Not Found </span></a></li>');
            $('#mainsearch #finding').hide();
        },

        error : function (xhr, ajaxOptions, thrownError) {
                $('#mainsearch #finding').hide();
        }
    });
}
}

I get desired results in search with no error. but the hide() isn't hiding the animation. However, entering $('#mainsearch #finding').hide(); hides the animation.

Note : Here #mainsearch #finding is a div which is animated by css3.

Upvotes: 2

Views: 353

Answers (1)

Jack
Jack

Reputation: 526

Take away the delay i think ajax returns faster than delay...

     $('#mainsearch #finding').delay(400).show(0);
     $('#mainsearch #finding').show(0);

Upvotes: 1

Related Questions