Skip to main content

jQuery UJS and AJAX Discussion

General • Asked by Chris Oliver

Thanks Chris, nice one


Nice video, thanks!


Thanks a lot for sharing it! Very nice and clear!


While most of this was review for me, it was nice to see a tutorial that went so far in depth on the inner workings of Rails. The details you included would have been so handy to know in my early days of learning Rails.

Also, looks like you're using the Yosemite beta for OS X...what do you think?

Thanks David! I think learning how Rails works itself is the key that most people aren't teaching. Hopefully this approach helps a lot.


One way to debug the JS response is in the Network tab of the web inspector. At least you can make sure the Javascipt is what you are expecting.

Good point. That works well enough. I'm curious, do you know of any ways to actually have it throw Javascript exceptions to make debugging even easier?

I guess it does trigger the "ajax:error" callback with the error, so we could listen for that. Looks like this gives a few decent examples: http://blog.bigbinary.com/2...

I didn't know.

That makes sense, will check it out!

Yeah I think that's one of the main disadvantages when sending a .js.erb template that gets eval'd, rather than sending JSON (or an HTML or text snippet, or a header-only response, or whatever) and handling all the Javascript/Jquery stuff in your client-side assets.

This link says you can just take the response output (from the network tab as Victor said) and paste it into the console to see any Javascript errors:
http://www.alfajango.com/bl...

I'm looking to improve the js debugging in Rails 5 with this pull request:
https://github.com/rails/ra...

Very cool. I really like this idea and certainly something that should be in Rails core if they continue supporting JS responses.


Thank you so much, Chris. So, if I want all my articles to appear via ajax, can I do what you describe above, and use the remote: true in link_to?

If you create a partial to render the list of articles, you can do that easily with this. If you have a div that contains all the articles:

<div id="articles"></div>

You can create a link to load them:

<%= link_to "Load Articles", articles_path, remote: true %>

And then your articles.js.erb can insert them into the page:

$("#articles").append("<%= escape_javascript(render partial: "articles") %>");

That would render the _articles.html.erb partial, insert it into the JS response, and then when it gets executed, it will add it to the end of the #articles div.

Make sense?

Yes, I'll try that! Thank you!!!!



Hi, I successfully added jquery_ujs functionality to ajaxify a controller action 'hide':

class ResearchersController < ApplicationController

...

def hide
@researcher = Researcher.find(params[:id])
@researcher.toggle_visibility!
end

....

class

my hide.js.erb file looks like this:

$("#researcher_<%= @researcher.id %>").text("<%= toggle_visibility(@researcher) %>");

This all works fine.

The problem however is that my integration test now fail with a 'missing template' error

How can I make the 'missing template' error in my tests go away?

greetings,

Anthony


Very well done. This concept never clicked for me as it has after watching this. I hope to subscribe soon!

Is there some sort of turbo links consideration here? Whenever I refresh the page it goes back to this date '2000-01-01 02:50:14 UTC' but the rails server output shows me that everything should have worked see picture. But if I check the record in the console I see the date above.

I have a feeling it's something obvious

My guess is that you might have a typo in your published.js.erb file causing it not to get executed. You can inspect the response in your browser and verify if you have any invalid code. Turbolinks or something could be caching the page to the old value but a refresh *should* display it with the latest value in your show action.

thanks for the quick reply, I hope to be a customer soon. Looks like the year is just refreshing to 2000-01-01 oddly and the actual time is behaving as it should. data-type is :time for published_at. Will need to do some more research.

Hmm, it definitely looks like it's working right. The date appears to have reset to a default value though. I'm going to guess the time column is similar to datetime which also stores the date (according to your logs, it looks right). If it doesn't though, then that could be why your dates keep resetting to 2000.


Thanks for the video. Never really got the hang of AJAX requests in Rails until now.


Woah! A JavaScript file, as the view, runs on the client after the UJS click-through!? That's awesome! I always thought I would have to write an active AJAX submitter/listener on the client side to wait for a response. This is so cool! Thank you for putting in the effort to make these videos!


Is there any particular reason you use method: :patch over method: :get ?

I'm using patch because we want to modify the record. You don't ever want a GET request to update a record because that would be unsafe so either a PUT or a PATCH is best in this case.


You done a video on how to load different views in your app using ajax. Similar to what you have this site where you load the whole content of the page using page. Abit like youtube.


Hi Chris. I used this method and pushed my git to heroku. However in the production mode, link_to wont route to PATCH but it routes to GET instead and JS.ERB file wont load. any fix ? (rails 4.1.4 ruby 2.0.0)

view.
<%= link_to "Kabul", publish_proposal_path("accepted"), :method => :patch, remote: true %>

route.
patch '/publish_proposal/:id' => 'charges#publish_proposal', as: :publish_proposal

publish_proposal.js.erb
$("#publishproposal").html("<%= escape_javascript(render partial: "charges_list", object: @charges) %>");

charges controller.
if branduser_logged_in?
id=current_branduser.id
status=params[:id]
@charges=Charge.where(:branduser_id => id).where(:status => status)

elsif instauser_logged_in?
id=current_instauser.id
status=params[:id]
@charges=Charge.where(:instauser_id => id).where(:status => status)

else
redirect_to root_path

end


data disable with only works with remote: true? because i used on "new book" (also using an sleep) but nothing happen.


I have a radio buttons group and before everything happens I need to validate if any option is checked, If so the request go on and Publish the book but if there's no option checked I need to send an alert to the user and stop the process.
How can I do that @excid3:disqus?


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 24,647+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.