SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast Sam32's Avatar
    Join Date
    Sep 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Ajax call

    Hi,

    I have a function that displays a loading icon just before the ajax call starts, but I wanted to display that icon only if the ajax call takes longer than 3 seconds. My question is: How to implement a counter after the ajax call?

    Code:
    function search() {
    	var val = $("#sfield").val(); 
    	var p = "sfield=" + val;
    	$.ajax({
                type: "POST",
                url: "search.php",
                data: p,
    	    beforeSend: function() {
    		$('#loader').show(); //show image loader
    	    },
    	    success: function(data){
    	        $('#loader').hide();
                    $('#sresults').html(data);
                }
        });
    }

  2. #2
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use the setTimeout() function to trigger something to happen after a delay:

    Code JavaScript:
    function search() {
    	var val = $("#sfield").val(); 
    	var p = "sfield=" + val;
    	$.ajax({
                type: "POST",
                url: "search.php",
                data: p,
    	    beforeSend: function() {
    		$('#loader').show(); //show image loader
                    setTimeout(function(){
                         if ($('#loader').is(':visible')) {
                             // Show a different icon
                         }
                    },3000);
    	    },
    	    success: function(data){
    	        $('#loader').hide();
                    $('#sresults').html(data);
                }
        });
    }

  3. #3
    SitePoint Enthusiast Sam32's Avatar
    Join Date
    Sep 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works like a charm, thanks Anthony!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •