Skip to content

Rails 3: jquery basics

March 22, 2011

I created the  jquery using simple rails 3 application

$ rails new jquery_example -d mysql

At first we copy the jquery uncompressed file here and create a file in public/javascripts/jquery1.5.js  and paste it. This is a base file of jquery

then

$ gedit config/database.yml

put your password as corresponding field

$ rails g scaffold Student name:string standard:string mark:integer status:boolean description:string

$ rake db:create

$ rake db:migrate

go to app/views/students/_form.html.erb and edit it as follows,  this id’s and class are using jquery for client side validations


<div class="field">
<%= f.label :name %><br />
<%= f.text_field :name %>
</div>
<div class="field">
<%= f.label :standard %><br />
<%= f.text_field :standard %>
</div>

<div class="field">
<%= f.label :mark %><br />
<%= f.text_field :mark, :id => "mark_id" %>
</div>
<div class="field">
<%= f.label :status %><br />
<%= f.check_box :status, :id => "status_id" %>
</div>

<div class="description" style="display:none">
<%= f.label :description %><br />
<%= f.text_field :description %>
</div>
<div class="filed">
<%= f.submit %>
</div>

we write our own jquery code in public/javascripts/myscript.js and save it

$(document).ready(function(){
$('#mark_id').click(function(){
alert ('carefully enter the mark');
});
$('#status_id').click(function(){
if ($('#status_id').attr('checked'))
{$('.description').show();
}
else
{
$('.description').hide();
}
});
});

we must given a path of our jquery files unless its not working so
app/views/layout/application.html.erb in this file to remove :defaults jquery had prototype and enter our file names
as below

<%= stylesheet_link_tag :all %>
<%= javascript_include_tag 'jquery-1.5', 'myscript.js' %>
<%= csrf_meta_tag %>

to run our application

status check box is ticked it shows the description field otherwise it was hidden, because before we mention style=”display:none” in _form.html.erb

 

Advertisements
3 Comments leave one →
  1. harshdeep permalink
    June 14, 2012 12:02 pm

    not working

  2. harshdeep permalink
    June 14, 2012 12:15 pm

    gud one …running now

  3. Arif Usman permalink
    September 7, 2012 12:35 pm

    Is there a way for dynamic text field such it appears with dynamic value every time. For eg: Suppose I have 3 fields “from”, “to” & “discount”. For the first it appears blank and the user will enter some values such as “1”, “5”, “25” respectively. Now from the next time onward the “from” field should appear with one successive value compare to “to” field. In this case the “from” field will be “6” for second time. Is it possible in rails to achieve this. I have used nested form to show fields dynamically on click of “Add Another” link. Any help will be greatful. Following is my code:

    newoffer.html.erb
    ———————–

    builder %>

    offers_controller
    ———————

    def newoffer
    1.times do
    couponrange = @offer.couponranges.build
    end
    end

    application_helper
    ———————–

    module ApplicationHelper
    def link_to_remove_fields(name, f)
    f.hidden_field(:_destroy) + link_to_function(name, “remove_fields(this)”)
    end

    def link_to_add_fields(name, f, association)
    new_object = f.object.class.reflect_on_association(association).klass.new
    fields = f.fields_for(association, new_object, :child_index => “new_#{association}”) do |builder|
    render(association.to_s.singularize + “_fields”, :f => builder)
    end
    link_to_function(name, “add_fields(this, \”#{association}\”, \”#{escape_javascript(fields)}\”)”)
    end

    end

    application.js
    —————–

    function remove_fields(link) {
    $(link).prev(“input[type=hidden]”).val(“1”);
    $(link).closest(“.fields”).hide();
    }

    function add_fields(link, association, content) {
    var new_id = new Date().getTime();
    var regexp = new RegExp(“new_” + association, “g”)
    $(link).parent().before(content.replace(regexp, new_id));
    }

    _couponrange_fields.html.erb
    ————————————–

    “6” %>

    “6” %>

    “6”%>

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: