venkat blog: Line Item (or) Nested Model

In this model we are using [jquery & Ajax], Guided by Mr.Thyagarajan

jQuery : is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML.^[1] It was released in January 2006 at BarCamp NYC by John Resig.

AJAX:

AJAX = Asynchronous JavaScript and XML.

AJAX is not a new programming language, but a new way to use existing standards.

AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.

im learning how work jquery and ajax in rails in this example is given below

first we create a rails folder

$ rails new land -d mysql

next we are entering a project directotry

$cd land/

edit the database.yml and enter the mysql password

 gedit config/database.yml

create a scaffold name& address:

$rails g scaffold Country name:string address:string

create a scaffold name&references

$rails g scaffold State name:string country:references

create a scaffold city name & references;

$rails g scaffold City name:string state:references

create the database and migrate it:

$rake db:create
$rake db:migrate

before move the concept, Jquery file download from http://jquery.com/ .copied to the public/javascript folder like jquery.js and we will create the first.js

now how jquery is working , it will explained given below.

app/views/layout and then open the appliation.html.erb

given the jquery folder name &power.js

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

next we move to app/views/countries folder just open the _form.html.erb

<div>

<%= f.text_field :name, :id => 'countries_name_id' %>

</div>

open the javascript and enter the given code:

$(document).ready(function(){

$('#countries_name_id').click(function(){

alert('check');

});

start the sever [localhost:3000/countries]

then output will be given in

now we are going to create, under the folder _form.html.erb

<div class='add states' >
<%= add_state_link 'add_states' %>
</div>
<div id="result">
</div>

here 'add_state_link' is defined as helper class
app/helpers/countries_helper and then define it by

def add_state_link(name)
link_to name, '#', :class => 'add_state_class'
end

it will link as javascript it contains [public/javascript] like this power.js

$(document).ready(function(){

$('.add_state_class').click(function(){

alert('check');

});

the output is :

it's working so we need ajax in nested model and then we define url in the success handler:

$(document).ready(function(){
$('.add_state_class').click(function(){
$.ajax({
url: "/countries/add_states",
method: 'POST',
data: '',
success: function(data){
$(data).appendTo('#result');
/*alert('checking');*/
}
});
});
});

start the sever and click add_state it's giving Routingerror like this:

so rectify this error , go to config/ routes .rb and just paste the code like this

match "countries/add_states" => "countries#add_states"

resources :countries

next we are going to controller folder app/controllers/countries_controller.rb

add like this:

def add_states
render :partial => 'states', :locals => {:state_object => State.new}
end

it will redirect the app/views/countries/_state.html.erb . it will create our own:

<div>
<%= fields_for "country[new_state_attributes][]",state_object do |state_form|

%>
<%= state_form.text_field :name %>
<% end %>
</div>

last step is redirected app/models/country.rb

class Country < ActiveRecord::Base
has_many :states
accepts_nested_attributes_for :states, :reject_if => lambda {|a| a.values.all?(&:blank?) }, :allow_destroy => true
def new_state_attributes=attributes
attributes.each do |each_record|
states.build(each_record)
end
end
end

and define the state.rb

class State < ActiveRecord::Base
belongs_to :country
has_many :cities
accepts_nested_attributes_for :cities

end

then output is like this: