47

I have the following:

<%= link_to my_path, method: :delete, confirm: 'Delete?', class: 'link-delete', 'data-message' => 'Are you sure?', 'data-severity' => 'danger', :remote => true do %>
  <i class="icon-trash"></i>
<% end %>

which brings up a Bootstrap Modal for confirmation, and I wanted to hook onto the ajax call that so that I can display a spinner or some kind of text.

I know that I can use unobtrusive javascript to listen to the click event like so, if I DON'T use ':remote => true' in my link_to

jQuery ->
  $('.link-delete').live 'click', (event) ->
    $('.link-delete').html("Loading...")  #THE MSG OR ANIMATION I WANT TO DISPLAY
    $.get(this.href, null, null, 'script')
   false

but not sure how to combine the two when using ':remote => true'

Any suggestions?

thanks for the help

cgiacomi
  • 4,629
  • 6
  • 27
  • 33

2 Answers2

83

You can bind to ajax calls like this:

<%= link_to my_path, method: :delete, confirm: 'Delete?', class: 'link-delete', 'data-message' => 'Are you sure?', 'data-severity' => 'danger', :remote => true do %>
  <i class="icon-trash"></i>
<% end %>

$('.link-delete').bind('ajax:beforeSend', function() {
  $('#mySpinner').show();
});

$('.link-delete').bind('ajax:complete', function() {
  $('#mySpinner').hide();
});
Arjan
  • 6,264
  • 2
  • 26
  • 42
  • 1
    i am trying to do the same thing ..but somehow `ajax:complete` doesnt get fired. Only `beforeSend` is working. Iam using GET in my case. – Rahul Dess Jun 23 '15 at 00:50
  • @RahulDess Is your server generating a response? The only reason I can imagine for the complete callback not to trigger, is that the requests never completes. – Arjan Jun 23 '15 at 09:11
  • 1
    requests complete successfully ..but noticable point is that i render partial through javascrpipt in my controller . Does thtat change anything ? – Rahul Dess Jun 23 '15 at 14:11
  • 2
    @RahulDess If the controller returns JavaScript that replaces the link (or something containing it), then it would make sense if `ajax:complete` is not triggered since the original link is no longer there in the DOM for the event to propagate from. (This may not be a problem in the spinner case, since the spinner might have been blown away as well.) – antinome Feb 24 '16 at 18:28
12

You don't need to combine the two. Just use the format.js to call the javascript.

In your controller:

Controller

 def my_method
     #code here
     respond_to do |format|
      format.js  {}
     end
    end

my_method.html.erb

<div id = "link-delete"></div>

my_method.js.erb

$("#link-delete").html("<%= escape_javascript(render(:partial => "text_message"))%>");

_text_message.html.erb

<p>Loading...</p>
sjain
  • 23,126
  • 28
  • 107
  • 185
  • 9
    `$("#link-delete").html("<%= escape_javascript(render(:partial => "text_message"))%>");` can be shortened to `$("#link-delete").html("<%=j render "text_message")%>");` – Arjan Mar 08 '13 at 12:29
  • 1
    wow, I never knew about that. Its nice. But how it will know that you are rendering a partial or just a simple text ? You haven't defined partial in your render. – sjain Mar 08 '13 at 12:32
  • 1
    Sure, that I knew, but that is after the ajax request is performed. I would like to show a 'Loading... ' message before the ajax call is called. – cgiacomi Mar 08 '13 at 12:34
  • but you are using `:remote => true` in your link and it will call ajax on click. – sjain Mar 08 '13 at 12:36
  • 1
    Basically the 'Loading...' message should be displayed before the action in my controller is called. The problem is that with the Bootstrap modal I seem to lose control of the invocation process. – cgiacomi Mar 08 '13 at 12:36
  • @SaurabhJain exactly! And I can't figure out how to hook onto the 'click' event and add custom jQuery/javascript to the actual invocation (like I would if I used my little unobtrusive javascript). At least not when I use the :remote => true – cgiacomi Mar 08 '13 at 12:38
  • @SaurabhJain If you provide the render function with just a string argument, rails will look for a partial with that name in it's current context. See http://guides.rubyonrails.org/layouts_and_rendering.html#using-partials – Arjan Mar 08 '13 at 13:20
  • Sure and thanks :) but I guess I can't explain myself correctly :( Thanks for the help. – cgiacomi Mar 08 '13 at 13:30