jQuery: How to enable `beforeSend` for `$.ajax({dataType:'jsonp'...`? Is there any solution?

Question

jQuery: How to enable beforeSend for $.ajax({dataType:'jsonp'...? Is there any solution? http://jsfiddle.net/laukstein/2wcpU/

<div id="content"></div>
<script>
$.ajax({
    type:"GET",
    url:'http://lab.laukstein.com/ajax-seo/.json',
    dataType:'jsonp',
    async:false,
    beforeSend:function(data){ // Are not working with dataType:'jsonp'
      $('#content').html('Loading...');
    },
    success:function(data){
        $('#content').html(data.content);
    }
});
</script>

Solution 1

This is just the nature of how JSONP works, creating a <script> tag, not actually using a XMLHttpRequest to get data. For what you're doing, you can just run the code before, like this:

$('#content').html('Loading...');
$.ajax({
  type:"GET",
  url:'http://lab.laukstein.com/ajax-seo/.json',
  dataType:'jsonp',
  async:false,
  success:function(data){
    $('#content').html(data.content);
  }
});

Solution 2

As per jQuery documentation

When data is retrieved from remote servers (which is only possible using the script or jsonp data types), the operation is performed using a tag rather than an XMLHttpRequest object. In this case, no XMLHttpRequest object is returned from $.ajax(), and the XMLHttpRequest object and the textStatus arguments passed to the handler functions such as beforeSend will be undefined. The error callback will never be fired for JSONP requests.

The same question is asked at the jQuery forums ajax:beforeSend for jsonp requests don't fire

The question's status is Status : Working on it. So it might be there at a future release.

And as Mike Alsups noted

I would name than function something other than 'beforeSend' since the semantics are not the same.

Also related : jsonp is not firing beforeSend?

---

Cannot use beforeSend with jsonp. Period.

Solution 3

you can use this code:

befor $.ajax put it, and you should have an image(or div,span ,...) loading with "div_loading" id.

$("#div_loading").ajaxStart(function(){$(this).show();});
$("#div_loading").ajaxStop(function(){$(this).hide();});