CODEWITHSUNDEEP
phpjqueryajax
Ben
Ben

Reputation: 11188

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...

Upvotes: 3

Views: 4112

Answers (2)

guest271314
guest271314

Reputation: 1

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/

Upvotes: 2

Vlad DX
Vlad DX

Reputation: 4730

  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);
}

Upvotes: 2

Related Questions