Skip to content

Jquery on Rails

19/03/2011

today Mr.Thiyagarajan took class how to include jquery file in rails and how to use the file in our rails application.

my works on jquery.

in my rails application i used scaffold javascript file only. To use jquery first include the jquery library. download the latest version of jquery from http://jquery.com/ .

To use jquery in rails application past the jquery download file in to /public/javascript . set the link in /app/views/layout/application.html.erb as


<%= javascript_include_tag 'jquery-1.5.1' %>  #include jquery file name no need extension.

for check jquery works write own jquery file and include into application.html.erb.

set class or id in _form to any one tag example


<div>
 <%= f.label :phone %><br />
 <%= f.text_field :phone, :id => 'customer_phone'%>
 </div>
 <div>
 <%= f.label :email %><br />
 <%= f.text_field :email, :class => 'customer_email'%>
 </div>

catch these class and id in jquey file like

myjquery.js include the file in application.html.erb <%= javascript_include_tag ‘jquery-1.5.1′,’myjquery’ %>


$(document).ready(function(){
$('#customer_phone').click(function(){
alert('jquery works for "id"');
});
$('.customer_email').click(function(){
alert('jquery works for "class"');
});
});

now start the rails server and open the application url in browser.

click the phone text box it will show like

i set the ‘id’ for phone text box and catch into the myjquery.js set alert for that.

then click the email text box it will show like

i set the ‘class‘ for phone text box and catch into the myjquery.js set alert for that.

this is the easy way to include jquery file in rails application.

id => id name is a unique name for a tag.

class => class name can set multiple tag

thanks…

Advertisements

From → Jquery

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: