Rails, using jQuery without jrails

Question

Hello all, I have been trying to convert my rails 2.2.2 app over to jQuery, and would like so without using jrails. The only reference material I can find on the subject is Railscasts Episode 136. Ryan goes over how to use jQuery to post a form and handle the response in a .js.erb file.

My questions is has anyone tried to use jQuery with .js.erb files with anchors as the trigger? As a replacement for "link_to_remote".

I have gotten jQuery to do a .get to submit this link on click to the controller, but I cannot seem to get it to go into the .js.erb file.

Thanks

Answer 1

Hi, here are the steps to get anchors working by hijacking their behaviour with jQuery style.

In the view, lets call it index.html.erb you put some anchor with a special id or class by using the normal link_to helper - for example link to the show action of the users controller by using the 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>

Second step - make the controller able to answer in javascript:

# in users_controller.rb
def show
  @user = User.find(params[:id])
  respond_to do |wants|
    wants.html
    wants.js
  end
end

Next one - create the corresponding js.erb file, in this case it would be users/show.js.erb and 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 %>");

Please note, that erb code has to be put into double quotation marks.

And now, on the last step, hijack the link with jQuery in your application.js file like so:

# in application.js
$(document).ready(function () {
  $(".ajax_link").live("click", function() {
    $.getScript(this.href);
    return false;
  });
}

It's pretty simple: if your document is loaded completely, all nodes with the 'ajax_link' class are hijacked and on a click event getScript gets the javascript answer from the url specified in the anchors href attribute.

By the way: this will also work perfect as normal link if javascript is disabled.

Hopes this will help you, if you have any questions don't hesitate to ask! ;)

Answer 2

I am using the following :view

<%= link_to 'more ...', show_all_tags_path(:category => category.name), :class => 'ajax_link' %>

:controller (I have verified that it gets 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 does not provide a line number (see screenshot here: http://dev.tristar-cimarron.com/rails%5Fjquery.png)

Answer 3

what about the authenticity token ? you are completely ignoring 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 gets thru somehow, I wasn't able to figgure that out yet, so any ideas would be appreciated.