Running image loading with jQuery Ajax .done() method

Question

I am trying to create a simple loading animated indicator in this demo. In my jQuery Ajax call I am trying to use new methods and style of Ajax request as:

 var req = $.ajax({
        type: "POST",
        url: "datapro.php"
        });

        req.done(function(data) {
         //do something
        )};

Now my question is if the .ajaxStart() and .ajaxComplete() are compatible with new versions of jQuery? If so, how I can call them in req object? Is it possible to call them like req.ajaxStart() and req.ajaxComplete()?

If so, where to call them? I am guessing to use the req.ajaxComplete() at very end of request after .done() but I am confused where to use the req.ajaxStart().

 <script>
    $(document).ready(function(){
      $(document).ajaxStart(function(){
        $("#wait").css("display","block");
      });
      $(document).ajaxComplete(function(){
        $("#wait").css("display","none");
      });
      $("button").click(function(){
        $("#txt").load("demo_ajax_load.asp");
      });
    });
</script>

Answer 1

Depending on which AJAX function you are going for, you must use the specified completed function in order to accomplish what you are trying to do. Those two AJAX functions, which you are talking about are meant to be triggered on any AJAX requests which are made within the document, thus not really reliable if you have multiple requests and you only want to bind it to one request.

In your case it would look something like below, where we use your load function and then use the completed function on when AJAX request has been completed. Keep in mind show and hide functions are handy for display: block and display: none CSS property settings respectively, I included them in the below example.

<script>
    $(function(){
        $("#wait").show();
        $("#txt").load("demo_ajax_load.php", function(response, status, jqxhr){
            // AJAX request has been completed
            $("#wait").hide();

            switch (status) {
                case 'error':
                    // Miscellaneous error occurred (use jqxhr.status and jqxhr.statusText for details)
                    break;
                case 'timeout':
                    // Connection timed out
                    break;
                case 'notmodified':
                    // Target URL resource has not changed since last visit
                    break;
                case 'success':
                    // All went well
                    break;
                case 'parsererror':
                    // JSON parser stumbled across to an error
                    break;
                default:
                    // jQuery error strings have changed since last time
                    break;
            }
        });
    });
</script>

You can use either of these to make a POST request, so either one is okay in your case. You should not be using the POST method for requests that contain no actual data, GET method is better for that.

Whichever one of these examples you may use, you should be using a plain object for your data. Otherwise you should use the above example, or instead of using post function you would use the get function.

<script>
    $(function(){
        $("#wait").show();

        var jqxhr = $.post("demo_ajax_load.php");

        jqxhr.done(function(response){
            // AJAX request was a success
            $("#txt").html(response);
        });

        jqxhr.fail(function(response){
            // AJAX request was a failure
        });

        jqxhr.always(function(response){
            // AJAX request was completed
            $("#wait").hide();
        });
    });
</script>

Hopefully this helped you out.

Answer 2

Try this:

$("#wait").css("display","block");
$.ajax({
     type: "POST",
     url: "datapro.php",
     success: function(data) {
          $("#wait").css("display","none");
      }
});

DEMO

A excellent work for loading pictures

jQuery.fn.extend({
    loadImage:function(appendTo,callback){
       return this.each(function() {
           $("#wait").css("display", "block");
           $(this).load(function(){
               callback();              
              $("#wait").css("display", "none");
           }).appendTo($(appendTo));
       });
    }
});
$(document).ready(function () {    
    $("button").click(function () {
        var img="<img src='http://oi50.tinypic.com/16a4do9.jpg'>";
        $(img).loadImage("body",function(){
           alert("load");
        });
    });
});

DEMO

Answer 3

Use this:

$.ajax({
beforeSend:function(){
$("#wait").css("display","block");
},
 type: "POST",
 url: "url",
 success: function(data) {
      //do something here using data
  },
complete:function(){
$("#wait").css("display","none");
}
});