Question

How can I show a “loading…” text ONLY into the div that calls jquery.load().

$(document).ready(function()
{
    //only one ajaxSend for all divs
    $(document).ajaxSend(function()
    {
        $(this).html('LOADING...'); //'this' doesn't works
    });

    //...

    $("#ranking-content").load("content/ranking.php");
    $("#empleados-content").load("content/empleados.php");
    //... more and more

});

Inside the ajaxSend callback, how can I get the div’s ID that made that ajax request?

I’m sure that there is a better way than doing one ajaxSend per div.

Answer 1

To customize the behavior for a particular div, use the ajax function:

Define beforeSend (script to run before the ajax call) and context (the HTML element):

$.ajax({
  context: $('#ranking-content'),
  url: 'content/ranking.php',
  beforeSend: function (xhr) {
    $(this).html('Loading');
  }
}).done(function (data) {
  $(this).html(data);
});

Using this ajaxSend isn’t needed. You can re-use this code by merging the parameters to ajax with settings supplied by a caller.