StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PORails 3.1 Remote Button Unobtrusive Javascript event not caught (JQuery)
text
Body
copied!<p>I want to start using the Ajax events ajax:success, ajax:failure, ajax:complete and ajax:beforeSend as recommended for unobtrusive Javascript in posts like:</p> <ul> <li><a href="http://www.simonecarletti.com/blog/2010/06/unobtrusive-javascript-in-rails-3/" rel="nofollow">http://www.simonecarletti.com/blog/2010/06/unobtrusive-javascript-in-rails-3/</a></li> <li><a href="http://www.alfajango.com/blog/rails-3-remote-links-and-forms/" rel="nofollow">http://www.alfajango.com/blog/rails-3-remote-links-and-forms/</a></li> </ul> <p>But for some reason it's not working for me. I am missing something (something small) as I cannot get the events to trigger my Javascript. I am hoping someone could spot the "obvious" mistake/omission in my code.</p> <p>Some details on my environment:</p> <ul> <li>Rails 3.1 </li> <li>jQuery (jquery-rails gem)</li> <li>therubyracer for server side js processing (not that it should matter for my example)</li> </ul> <p>To try and work out what I am missing I have created a simple test application which has a single remote button to. When the button is clicked, I want alert boxes to fire. The code of this app can be seen on github here:</p> <p><a href="http://github.com/jpmcgrath/rbtest" rel="nofollow">http://github.com/jpmcgrath/rbtest</a></p> <p>I have deployed the application to heroku here:</p> <p><a href="http://rbtest.heroku.com/projects/" rel="nofollow">http://rbtest.heroku.com/projects/</a></p> <p>If you look at the app, you can click the button and the button successfully creates a new project (to see it manually refresh), but ajax:success event doesn't seem to happen?</p> <p>The guts of the code is as follows:</p> <p>In projects_controller.rb</p> <pre><code>def remote_test @project = Project.new(:name => "remote test") respond_to do |format| if @project.save puts "project saved!\n\n\n" format.html { redirect_to @project, notice: 'Project was successfully created.' } format.json { render json: @project, status: :created, location: @project } else format.html { render action: "new" } format.json { render json: @project.errors, status: :unprocessable_entity } end end end </code></pre> <p>In application.js</p> <pre><code>jQuery(document).ready(function() { jQuery(".remote_button").click(function() { alert('Handler for .click() called.'); }) .bind("ajax:complete", function() { alert('complete!'); }) .bind("ajax:beforeSend", function () { alert('loading!'); }) .bind("ajax:error", function (xhr, status, error) { alert('failure!'); }) .bind('ajax:success', function(event, data, status, xhr) { alert('success!'); }); }); </code></pre> <p>In the view projects/index.html.erb</p> <pre><code><%= button_to "remote test", remote_test_path, :remote => true, :class => 'remote_button' %> </code></pre> <p>If anyone could point out what I am missing (I suspect it has something to do with response type) it would be greatly appreciated.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload