jQuery ajax beforeSend interfering with .done()

In a website I have several ajax-parts that are loaded by events, mostly clicks. To inform the visitor a loading partial is shown. This works nice most of the time, but sometimes the ajax call is receiving the respons so quick it interferes with the beforeSend.

My typical structure looks like this:

$(document).on('click', '.handler', function() { 
  var target = $(this).attr('data-targetElement');

  $.ajax({
    url: '/ajax.php?someParameter=hasValue',
    beforeSend: showLoading(target)
  })
  .done(function(response) { 
    console.log('Hi there, I\'m done!');
    $('#' + target).html(response);
  });
});

// This is in a function because it's used by all ajax-calls
function showLoading(target) { 
  $('#' + target).html('My loading message');
}

The problem is, when I'm inspecting console messages, that the loading message is still shown even though the .done() was reached, because Hi there, I'm done! is shown.

So it looks beforeSend doesn't seem to have reached a completed state or something like that causing it to 'freeze', because the content in the targetElement is not updated with the response for the ajax-call.

I'm not sure how to solve to this. Any suggestions?

Update, Sorry for the typo, I just typed the exemplary code in here...

Answers


  1. At first, you need to fix all syntax errors in your code. Remove ; in the middle of the statement.

    $.ajax({
      beforeSend: showLoading(target);
      //                             ^ SYNTAX ERROR
    })
    
  2. When you write showLoading(target) you call the showLoading() function immediately.

    If you need to set pass it as a callback with parameters, you need to pass a function, that returns your callback.

    beforeSend: function() {
        showLoading(target);
    }
    

Try removing syntax error semicolon ; at close of beforeSend , utilizing var target = $(this).data('targetelement'); for target variable

$(document).on('click', '.handler', function() { 
  var target = $(this).data('targetelement');
  console.log(target)
  $.ajax({
    type:"POST",
    url: '/echo/html/',
    beforeSend: function() {showLoading(target)},
    data:{html:"Hi there, I\'m done!"}
  })
  .done(function(response) { 
    console.log(response);
    $('#' + target).html(response);
  });
});

// This is in a function because it's used by all ajax-calls
function showLoading(target) { 
  $('#' + target).html('My loading message');
}

jsfiddle http://jsfiddle.net/4xp1aag8/1/


Need Your Help

Replace text in the middle of a TextNode with an element

javascript html dom textnode

I want to insert html tags within a text node with TreeWalker, but TreeWalker forces my html brackets into & lt; & gt; no matter what I've tried. Here is the code:

Sending php generated form data via Ajax from Dialog box

javascript php jquery ajax

Hi Guys any help on this? I have a dialog box triggered by a button click that calls my php script to generate a form which needs to be filled and submitted. I want to do the sending and conformati...