Ajax返回不触发回调

Question

I'm trying to troubleshoot some code that I did not write and I'm having a lot difficulty trying to figure out why an Ajax return is not firing a Callback. Here is the code that attaches the behaviors to the ajax functions:

  # Callback before AJAX request sends
cbBeforeSend = (jqXHR, settings) ->
  console.log jqXHR
  # initialize message/status elements
  $flashIcon.attr 'class', 'icon icon-refresh icon-spin'
  $flashError.html ''
  $flashNotice.html ''

# Callback when AJAX returns with success
cbSuccess = (data, textStatus, jqXHR) ->
  console.log 'success'
  $flashIcon.attr 'class', 'icon icon-ok-sign'
  window.globalLoadCallback()

# Callback when AJAX returns with error
cbError = (jqXHR, textStatus, errorThrown) ->
  console.log 'error'
  $flashIcon.attr 'class', 'icon icon-remove-circle'
  # Run the response javascript, even when the status indicates an error
  if /text\/javascript/.test jqXHR.getResponseHeader('Content-Type') 
    eval jqXHR.responseText

# Callback when AJAX returns
cbComplete = (jqXHR, textStatus) ->
  console.log 'cbComplete'
  if $flashIcon.is('.icon-refresh')
    $flashIcon.attr 'class', 'icon icon-warning-sign'

Our application has two links to the Quoting/Quote path:

The new quote link works and fires the 'success' and 'cbComplete' callbacks I've shown above. Here is the code for that link:

<li>
  <%= link_to new_quoting_quote_path, remote:true do %>
    <i class="icon icon-plus-sign"></i>
    <span>New Quote</span>
  <% end %>
</li>

The edit quote link works, it brings you to the correct partial and the object gets returned in the console, but the 'success' and 'cbComplete' callbacks aren't firing (error isn't either). Only the 'cbBeforeSend' callback is firing because the classes on the flashIcon remain "icon icon-refresh icon-spin". I don't believe there is a problem with crm_connection because in browser the link is rendered as "/quoting/quotes/183/edit". The correct ID seems to be supplied. Here is the code for that link:

<%= client_management_tab 'Health', edit_quoting_quote_path(@crm_connection) %>

Sorry I can't supply more details. Unfortunately I did not write this code and am only tasked with fixing it. Thank you for any help you can provide.

I beleive this is the code that attaches the requests:

  $flashInfo   = $('div.flash-info')
  $flashIcon   = $flashInfo.find('i#ajax-status')
  $flashError  = $flashInfo.find('#flash-error')
  $flashNotice = $flashInfo.find('#flash-notice')
  $(document).bind 'ajax:beforeSend', cbBeforeSendBound
  $(document).bind 'ajax:success', cbSuccessBound
  $(document).bind 'ajax:error', cbErrorBound
  $(document).bind 'ajax:complete', cbCompleteBound

$.ajaxSetup(
  beforeSend: cbBeforeSend
  success: cbSuccess
  error: cbError
  complete: cbComplete
  )

Answer 1

From the jQuery docs for ajaxSetup:

Description: Set default values for future Ajax requests. Its use is not recommended.

I'd suggest you change your call and assign the callbacks to your specific ajax request:

jQuery.ajax
    url: 'blah/blah',
    success: cbSuccess,
    error: cbError,
    etc

Answer 2

If the actual call to jQuery.ajax sets its own callback, then I am fairly certain it will ignore the ones provided by ajaxSetup. This makes them pretty unreliable for anything but setting defaults, and as Ricardo pointed out in his answer, the jQuery developers recommend not to use this mechanism.

You have a couple of options the way I see it. There are a series of other ajax functions provided by jQuery for global ajax event binding:

jQuery.ajaxStart, jQuery.ajaxStop, jQuery.ajaxComplete, jQuery.ajaxError, jQuery.ajaxSuccess, jQuery.ajaxSend

If you bind the events using these functions then they will always be invoked by ajax calls through jQuery BUT this can also be overridden by setting the option "global:false" in the actual ajax request.

If this is the case for you, then you are pretty much stuck with Ricardo's answer: modify the actual calls to jQuery.ajax to do the binding.