duanju9104
duanju9104
2015-08-15 13:35

jQuery ajax beforeSend干扰.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...

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • duanbei2914 duanbei2914 6年前
    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);
      }
      
    点赞 7 评论 复制链接分享
  • drsvw88664 drsvw88664 6年前

    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/

    点赞 10 评论 复制链接分享