Rails using jQuery without jrails
I'm trying to convert a rails 2.2.2 app to jQuery and would like to do this without using jrails. The only reference I can find on this is Railscasts Episode 136. Ryan talks about how to use jQuery to post a form and process the response in a .js.erb file.
My questions: Has anyone tried to use jQuery with .js.erb files with anchors as a trigger? As a replacement for "link_to_remote".
I got jQuery to do a .get to send this click link to the controller, but I can't seem to get it to go into the .js.erb file.
thank
source to share
Here are the steps to get the anchors to work by capturing their behavior using jQuery styling.
In the view, by calling it index.html.erb
, you place some anchor with a special id or class using a normal helper link_to
- for example, a reference to a show
user controller action using resource routing
# in index.html.erb
<%= link_to 'First user', user_path(1), class => 'ajax_link' %>
<div id='some_container'>
to modify via javascript.
</div>
The second step is to make the controller respond to javascript:
# in users_controller.rb
def show
@user = User.find(params[:id])
respond_to do |wants|
wants.html
wants.js
end
end
Next - create a corresponding js.erb file, in which case it will users/show.js.erb
and will do all your javascript magic right here.
# show.js.erb
alert('ajax answers!');
$('#some_container').html('hey this works great');
$('#some_container').after("<%= @user.name %>");
Note that the erb code must be enclosed in double quotes.
And now, in the last step, kill the jQuery link in your file application.js
like this:
# in application.js
$(document).ready(function () {
$(".ajax_link").live("click", function() {
$.getScript(this.href);
return false;
});
}
It's pretty simple: if your document is fully loaded, all nodes with the "ajax_link" class are captured and on the click event getScript
receives a javascript response from the url specified in the anchors href attribute.
Hope this helps you, if you have any questions feel free to ask!;)
source to share
I use the following: View
<%= link_to 'more ...', show_all_tags_path(:category => category.name), :class => 'ajax_link' %>
: controller (I confirmed it is here)
def show_all_for_section
@category = TagCategory.find_by_name(params[:category])
respond_to do |format|
format.html { redirect_to root_path }
format.js
end
end
show_all_for_section.js.erb
alert('ajax answers!');
application.js
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".ajax_link").live("click", function() {
jQuery.getScript(this.href);
return false;
});
});
When I click on the link, it just throws a js error but doesn't provide the line number (see screenshot here: http://dev.tristar-cimarron.com/rails_jquery.png )
source to share
what about an authenticity token? you completely ignore it
/*
Post data via html
Use the class post in your link declaration
<%= link_to 'My link', my_new_path(),:class => "post" %>
*/
jQuery.fn.postWithAjax = function() {
this.unbind('click', false);
this.click(function() {
$.post($(this).attr("href"), $(this).serialize(), null, "script");
return false;
});
return this;
};
$('a.post').postWithAjax();
<a onclick="var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', 'V6kGWHXmdepMOufNJBh0TZvvhON+Kag6GeR/MUj2dRk='); f.appendChild(s);f.submit();return false;" class="post add_to_cart " href="/line_items?product_id=547">Add to cart</a>
the problem with this code is that the link turns out somehow, I haven't been able to figure it out yet, so any ideas would be appreciated.
source to share