CODEWITHSUNDEEP
javascriptjqueryruby-on-railsrubyprototypejs
user502052
user502052

Reputation: 15257

Migrate from Prototype to jQuery (for newbie)

I am using Ruby on Rails 3 and I would like to use jQuery instead of Prototype (this one is what I am using at this time). I read many books, guides and tutorials but I still don't understand how I must use jQuery in my code (maybe it seams that nobody it "really" clear on this matter). Also, I have a lot of code written using Prototype so I would like to handle both at the same time and "progressively" migrate to jQuery.

I included the jQuery file in the layout file making <%= javascript_include_tag :defaults, 'jquery' %> so that the <script src="/javascripts/jquery.js?1307515315" type="text/javascript"></script> is present in the source code of all HTML pages. In order to avoid errors in the application.js file I added jQuery.noConflict() to the application.js file. Now, what I must do?

If I state a jQuery method in the application.js file 

jQuery(document).ready(function() {
    jQuery('#test_id2').click(function() {
      alert('Handler for .click() called.');
    });
})

and I call it using

<%= link_to 'change1', '#', :id => 'test_id1' %>

it will work but I would like to put the above code in a separated js file. How can I do and maj?

How I must name the JS file for a controller action? Where (in which folder) I must locate the related JS file? How can I state the respond_to method in my controllers?

def edit
  ...
  respond_to do |format|
    format.html # render edit.html.erb
    format.js # render... what file?! where?!
  end
end

Using Prototype I can write code directly in view files like the following:

<%= link_to_function( "change", :id => 'test_id2' ) do |page|
  page[:test_id3].toggle
  ...
end %>

How can I do that using jQuery in view files?

Have you some advice?

UPDATE

In my edit.js.erb file I have

<%
jQuery(document).ready(function() {
    jQuery('#test_id1').click(function() {
      alert('Handler for .click() called.');
    });
})
%>

In the edit.html.erb file I have

<%= link_to 'Test link', '#', :id => 'test_id1' %>

But when I click the above link jQuery doesn't work (the alert method is not triggered). Furthermore, if I try to insert the JavaScript code directly in the view file, I get the following error:

NameError: undefined local variable or method `document' for #<#<Class:0x00000102aa04d0>:0x00000102a75eb0>

Upvotes: 1

Views: 638

Answers (2)

Lucas
Lucas

Reputation: 2886

There are two differents things.

They are regular script that you can load the same way as you did with jquery: You put them in your public/javascript directories and include them with

<%= javascript_include_tag YourNameFile %>

Note that I didn't add the .js. javascript_include_tag will do that for you.

Then you have JS Templates. It's like your Prototype views. Except you have Jquery inside. So what you previously did works! If you use

respond_to do |format|
  format.html # render edit.html.erb
  format.js # render edit.js.erb
end

It'll render edit.js.erb (you can find it in the same directory as your edit.html.erb file).

Then you can add your jQuery AND your 'ruby' in those files (exactly like prototype). Just make sure that you load your jQuery.

If I missed something, add comment. :)

=== EDIT ===

In your Templates, you have to put <% %> only arounds Rails function !! Otherwise, it's supposed to be Javascript. So you edit.js.erb should looks like:

jQuery(document).ready(function() {
    jQuery('#test_id1').click(function() {
      alert('Handler for .click() called.');
    });
})

Upvotes: 1

Jake Jones
Jake Jones

Reputation: 1170

Your files should be named *.js.erb and be in a view folder (just like your *.html.erb), they should be named just like you name your *.html.erb files, i.e. edit.js.erb for edit action. You can write your ruby code in these files just like you did it for prototype (<% .... %>). Working with jQuery you usually work with selectors. For example, if you need to replace some html code on your page inside some <div id=someid></div> construction, you can do it in a way like this (# before element id is important):

$("#someid").html('<%= ... some ruby here, it can be render or anything ... %>')

If you need something to be inserted after some element, you do it like this:

$('<div>Some text</div>').insertAfter("#someid")

And so on.

Upvotes: 0

Related Questions