Skip to content

Rails 3: Nested model form(line item) using jquery and Ajax

March 23, 2011

Nested model form(line item) : நெஸ்டட் மாடல் பார்ம் என்பது ஒரு படிவத்தினுல் இன்னொறு மாடலில் உள் ள field -யை உள்னுழைப்பதாகும்.

முந்தைய பதிவினில் (post) நாம் ஒரே படிவத்தில் உள்ள field -யை hide செய்வதையும் show செய்வதையும் பற்றி பார்த்தோம்.

தற்போது line item எப்படி செய்வது என்பதை பற்றி காண்போம்.

முதலில் கீழ் வரும் கட்டளையை பயன்படுத்தி ரெயில்ஸ்-யில் ஓர் project -யை உருவாக்கவும்

$ rails new lineitemtest -d mysql

பின்னர் config/database.yml -ல் தங்களது mysql கடவுச்சொல்லை அதற்குரிய இடத்தில் பதிவுசெய்யவும்.

Interview மற்றும் Applicant என்ற இரண்டு மாடல்களை scaffold பயன்படுத்தி பின்வரும் கட்டளைகள் கொண்டு உருவாக்கவும்

$ rails g scaffold Interview name:string interview_date:date

$ rails g scaffold Applicant name:string interview:references

இவற்றிற்கான database -னை உருவாக்கவும்

$ rake db:create

$ rake db:migrate

இந்த project-ல் jquery -யினை பயன்படுத்த உள்ளதால் அதற்கான மூல நிரலை இங்கே நகலெடுத்து jquery-1.5.js என்ற கோப்பினை உருவாக்கி அதனுல் ஒட்டி /public/javascripts -ல் பதிவு செய்யவும். பின்பு /app/views/layouts/application.html.erb -ல் கீழ் உள்ளவாறு மாற்றம் செய்யவும்.

<%= stylesheet_link_tag :all %>
<%= javascript_include_tag 'jquery-1.5.1' %>
<%= csrf_meta_tag %>

app/models/interview.rb -ல் ஒன்றுக்கு மேற்பட்ட nested applicants ஏற்றுக்கொள்ள

has_many :applicants
accepts_nested_attributes_for :applicants

app/models/applicants.rb

class Applicant < ActiveRecord::Base
belongs_to :interview
end

என்ற வரியை பதிவு செய்யவும்

நம்முைடய interview form-ல் line item -ஐ  கெண்டு வருவதற்கு கீழ்கண்ட நிரல்களை app/view/interviews/_form.html.erb -ல் submit div class ற்கு மேல் உள்ளிடவும்.

<div class="item">
<%= add_applicant_link ("add freshers") %>
</div>
<div id="result">
</div>

மேலுள்ள add_applicant_link க்கிற்கான function-னை interview_helper-ல் எழுதவும்.

/app/helpers/interview_helper.rb -ல்

module InterviewsHelper
def add_applicant_link(person)
link_to person, "#", :class => "add_applicant_class"
end
end

மேலுல்ல class -யினை பயன்படுத்தி புதிதாக jquery -யை public/javascripts/firstscript.js  உருவாக்கி நம்முடைய நிரலை கீழ் உள்ளவாறு எழுதவும்.

$(document).ready(function(){
$('.add_applicant_class').click(function(){   //in interview helper
  $.ajax({
  type:'POST',
  url:'add_applicants',  data:'',
  success: function(data){
  $(data).appendTo('#result');
  }
})
});
});

நம்முடைய firstscript.js jquery-யினை application-வுடன் இணைக்க app/views/layouts/application.html.erb-ல் கிழ் உள்ளவாறு இனணக்கவும்.

<%= stylesheet_link_tag :all %>
<%= javascript_include_tag 'jquery-1.5.1', 'firstscript' %>
<%= csrf_meta_tag %>

ajax-ல் கூறிய add_applicants url, controller-யை கூப்பிடுகிறது ஆகையால் app/controllers/interview.rb -ல்
கீழுள்ள funtion னை உள்ளிடவும்

def add_applicants
render :partial => 'applicants', :locals => {:applicant_object => Applicant.new}
end

render :partial க்கான view-வை புதிதாக app/views/interview-ல் _applicants.html.erb என்று உருவாக்கி கீழ் உள்ள நிரலை இடவும்.

<div class="field">
<%= fields_for "interview[new_applicant_attributes[]]",applicant_object do |applicant_form| %>
<%= "applicant" %>
<%= applicant_form.text_field :name %>
<% end %>
</div>

மேலே பெறப்பட்ட new_applicant_attributes[]-ஐ database-ல் பதிய app/models/interviews.rb-ல் புதிய funtion-ஐ கீழ் உள்ளவாறு எழுதவும்.

class Interview < ActiveRecord::Base
has_many :applicants
accepts_nested_attributes_for :applicants
 def new_applicant_attributes=attributes
attributes.each do |record|
applicants.build(record)
end
end
end

add_applicants-ஐ வெளியீட்டில் காண்பதற்கு config/routes.rb-ல் வழி(path)யினை கூற

resources :applicants
match "interviews/add_applicants" => "interviews#add_applicants"
resources :interviews

வெளியீட்டினை காண்பதற்கு
$ rails server  என்ற கட்டளையை முனையத்தில் உள்ளிடவும்.
show வினை சொடுக்கினால் உள்ளிடப்பட்ட அனைத்து applicants-ஐ காண app/views/interviews/show.html.erb-ல் கீழ் உள்ள நிரலை எழுதவும்.

<p>
<b>Applicants:</b>
<ol>
<% for applicant in @interview.applicants %>
<li><%= applicant.name %></li>
<% end %>
</ol>
</p>

Advertisements
2 Comments leave one →
  1. M.sathish permalink
    March 23, 2011 9:31 pm

    Nice post. keep it up…

  2. April 7, 2011 2:39 pm

    சூப்பர் 🙂

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: