title: Coffeescript not handling ajax:success
body: <p>As <a href="https://stackoverflow.com/q/13310341/306084">I mentioned</a> in a question last week, I'm working with <a href="https://stackoverflow.com/users/203130/coreyward">@coreyward</a>'s <a href="https://stackoverflow.com/a/5766232/306084">excellent walk-through</a> for modal edit windows in Rails 3. However, I'm a relative novice with Coffeescript, and I'm having trouble with the code which is supposed to display the modal window on a successful Ajax response. This is the relevant function (drawn from <a href="https://gist.github.com/1456815" rel="nofollow noreferrer">Corey's gist</a>):</p>
  
  <pre><code>$ -&gt;
    $modal = $('#modal')
    $modal_close = $modal.find('.close')
    $modal_container = $('#modal-container')
  
    # Handle modal links with the data-remote attribute
    $(document).on 'ajax:success', 'a[data-remote]', (xhr, data, status) -&gt;
      $modal
        .html(data)
        .prepend($modal_close)
        .css('top', $(window).scrollTop() + 40)
        .show()
      $modal_container.show();
  
    $(document).on 'click', '#modal .close', -&gt;
      $modal_container.hide()
      $modal.hide()
      false
  </code></pre>
  
  <p>I've established that all the code inside the function works; it just never gets called. I can see the Ajax query in the Chrome network panel, and verify that it returns a proper response.</p>
  
  <p>I simplified the code to pop up an alert on an <code>ajax:success</code> event:</p>
  
  <pre><code>  $(document).on 'ajax:success', () -&gt; 
      alert('Ajax success event!')
  </code></pre>
  
  <p>...and nothing. So I think the `ajax:success' event is never happening.</p>
  
  <p>Trying to extract the simplest possible code that duplicates the problem, I set up <a href="http://jsfiddle.net/pjmorse/GdNKn/" rel="nofollow noreferrer">this jsFiddle</a> with the following code:</p>
  
  <p><code>&lt;a href="javascript:$.ajax('/echo/js/?delay=2&amp;js=WHEEEEE!');" data-remote="true"&gt;Edit&lt;/a&gt;​</code></p>
  
  <pre><code>$(document).on 'ajax:success', () -&gt; 
    alert('Ajax success event!')
  </code></pre>
  
  <p>​
  ...yeah. Nothing. The jsFiddle Ajax echo returns what it should, but the function never gets called. So I'm doing something wrong with <code>.on('ajax:success')</code>. (This is sort of the opposite problem as <a href="https://stackoverflow.com/q/13017890/306084">this question</a>, so that answer isn't helpful. <a href="https://stackoverflow.com/a/6598137/306084">This question</a>, about the mime-type of the response, looks promising, but doesn't explain why the jsFiddle doesn't work, because that doesn't touch my controllers.) What is it?</p>
  
  <p>ETA: I should probably mention the stack involved here. <em>facepalm</em></p>
  
  <ul>
  <li>Rails 3.2.8</li>
  <li>jquery-rails 2.1.3</li>
  <li>...which means jQuery 1.8.2</li>
  </ul>