Country State City using AJAX

Gurdipe_D · May 2, 2012, 3:58pm

HI , I have a state and country drop down in my client form and i
want that state to be populated when a country is selected, How ever
iam struggling on it… i dont want to implement plain JavaScript but
AJAX for this, please let me know any resources or the rite
direction…

Thanks in Advance

AJAJAJ · May 2, 2012, 4:05pm

This is a good resource to start:

2012/5/2 AJ [email protected]

AJAJAJ · May 2, 2012, 4:07pm

Thanks Laura
i have gone through this but it has an example where Javascript has been
used , i want to use AJAX and JQuery, Thanks

On Wed, May 2, 2012 at 7:34 PM, Lauro C.
[email protected]wrote:

–
You received this message because you are subscribed to the Google G.
“Ruby on Rails: Talk” group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–
Thanks & Regards,
Akshar Jamgaonkar

AJAJAJ · May 2, 2012, 4:16pm

On Wed, May 2, 2012 at 7:06 AM, akshar jamgaonkar
[email protected] wrote:

i have gone through this but it has an example where Javascript has been
used , i want to use AJAX and JQuery,

So what’s the problem? What have you tried so far, and how did it
not work?

–
Hassan S. ------------------------ [email protected]

twitter: @hassan

AJAJAJ · May 3, 2012, 9:13am

Hi Hassan,

I am Bit of a novoice to this… iam nt sure wether this is correct
approach…in my application.js file i have wriiten

$(document).ready(function() {
$(“#client_country_id”).change(function() {
$.ajax({
type: “GET”,
url: ‘/states/1’,
success: function(data) {
// Code
}
});
});
});

and my clients form has state feidl like this

<%= f.label :state1 %> <%= f.select 'state_id', State.find(:all).collect{|s| [s.name,s.id]} %>

now i want to pass the country id and ftecth state depending on
it… do i include the above div in a prtial and what to write in
the state controller…

Thanks in advance.

Thanks & Regards,

On May 2, 7:14pm, Hassan S. [email protected]

AJAJAJ · May 3, 2012, 1:32pm

Hey Aziz,

   really thanks for you repl..........so do i need to write a

controller action that would return me the states depending on the
country
and how do i render the state drop down in Cilent Form…Thanks…

Thanks,
AJ

On Thu, May 3, 2012 at 4:46 PM, Aziz B.
[email protected]wrote:

    $.ajax({
state_id that was selected currently. Using the below js, in your
success: function(data) {

Hi Hassan,
// Code
<%= f.label :state1 %>

been

http://groups.google.com/group/rubyonrails-talk?hl=en.

–
Thanks & Regards,
Akshar Jamgaonkar

AJAJAJ · May 3, 2012, 1:17pm

Hey AJ

In your ajax call, you need to pass the id of the selected state if you
are
using a nested resource url structure.
Your js would looks something like this:

$(document).ready(function() {
var country_states_path = '/countries/:id/states;
$(“#client_country_id”).change(function() {
var state_id = $(this).val();
$.ajax({
type: “GET”,
url: country_states_path.replace(“:id”, id),
success: function(data) {
// Code to populate cities
}
});
});
});

Incase you are not using nested resources, you still need to pass the
state_id that was selected currently. Using the below js, in your
controller, the state id would be available as params[:state]

$(document).ready(function() {
var country_states_path = ‘/states/’;
$(“#client_country_id”).change(function() {
var country_id = $(this).val();
$.ajax({
type: “GET”,
data: {country: country_id},
url: country_states_path,
success: function(data) {
// Code to populate cities
}
});
});
});

On Thu, May 3, 2012 at 12:42 PM, AJ [email protected] wrote:

success: function(data) {

Thanks in advance. > > i have gone through this but it has an example where Javascript has
–
You received this message because you are subscribed to the Google G.
“Ruby on Rails: Talk” group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–

Aziz M. Bookwala

AJAJAJ · May 3, 2012, 1:35pm

Hey AJ

Yes, to serve any request made by your client, you would need something
on
the server to handle the request.
As for rendering the dropdown, this is a pretty simple thing to do with
jQuery. Look around, you should find something quite easily.

On Thu, May 3, 2012 at 5:01 PM, akshar jamgaonkar <
[email protected]> wrote:

On Thu, May 3, 2012 at 4:46 PM, Aziz B. [email protected]wrote:
    var state_id = $(this).val();
Incase you are not using nested resources, you still need to pass the
url: country_states_path,

success: function(data) {

Thanks in advance. > > i have gone through this but it has an example where Javascript has

For more options, visit this group at
You received this message because you are subscribed to the Google G.
“Ruby on Rails: Talk” group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–

Aziz M. Bookwala

AJAJAJ · May 3, 2012, 1:39pm

Thanks Aziz… I have wriiten a countries_state action and in states
controller, and in application.js i have modified the path like this
var country_states_path = ‘/states/countries_state/’; however on console
its giving me eroor like

Couldn't find State with id=countries_state

... Iam

struggling
to find what;s going wrong as iam pretty new to all this…thanks a lot
all
of you for your help…

On Thu, May 3, 2012 at 5:03 PM, Aziz B.
[email protected]wrote:

On Thu, May 3, 2012 at 4:46 PM, Aziz B. [email protected]wrote:
    var state_id = $(this).val();
Incase you are not using nested resources, you still need to pass the
url: country_states_path,

success: function(data) {

Thanks in advance. > > i have gone through this but it has an example where Javascript has

For more options, visit this group at
You received this message because you are subscribed to the Google G.
–

–
Thanks & Regards,
Akshar Jamgaonkar

AJAJAJ · May 3, 2012, 1:41pm

Did you add a route for this new action?

On Thu, May 3, 2012 at 5:08 PM, akshar jamgaonkar <
[email protected]> wrote:

On Thu, May 3, 2012 at 4:46 PM, Aziz B. [email protected]wrote:
    var state_id = $(this).val();
Incase you are not using nested resources, you still need to pass the
url: country_states_path,

success: function(data) {

Thanks in advance. > > i have gone through this but it has an example where Javascript

[email protected].
–
http://groups.google.com/group/rubyonrails-talk?hl=en.
“Ruby on Rails: Talk” group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–

Aziz M. Bookwala

AJAJAJ · May 3, 2012, 1:43pm

my country_state action looks like this

def countries_state
@state = State.find(“country_id = :c_id”,{:c_id=>params[:country_id]})
respond_to do |format|
format.js
end
end

On Thu, May 3, 2012 at 5:08 PM, akshar jamgaonkar <
[email protected]> wrote:

On Thu, May 3, 2012 at 4:46 PM, Aziz B. [email protected]wrote:
    var state_id = $(this).val();
Incase you are not using nested resources, you still need to pass the
url: country_states_path,

success: function(data) {

Thanks in advance. > > i have gone through this but it has an example where Javascript

[email protected].
–
http://groups.google.com/group/rubyonrails-talk?hl=en.
–
Thanks & Regards,
Akshar Jamgaonkar

–
Thanks & Regards,
Akshar Jamgaonkar

AJAJAJ · May 3, 2012, 1:47pm

Make sure this route comes before the route entry for the country
resource.

On Thu, May 3, 2012 at 5:12 PM, akshar jamgaonkar <
[email protected]> wrote:

On Thu, May 3, 2012 at 5:08 PM, akshar jamgaonkar <

On Thu, May 3, 2012 at 5:01 PM, akshar jamgaonkar <

$(document).ready(function() {
});
$.ajax({

$(“#client_country_id”).change(function() {

now i want to pass the country id and ftecth state depending on
wrote:

–
[email protected].
You received this message because you are subscribed to the Google

[email protected].
You received this message because you are subscribed to the Google
–
http://groups.google.com/group/rubyonrails-talk?hl=en.
To post to this group, send email to [email protected].
Akshar Jamgaonkar

–
You received this message because you are subscribed to the Google G.
“Ruby on Rails: Talk” group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–

Aziz M. Bookwala

AJAJAJ · May 3, 2012, 1:43pm

Yes i have added…it looks like this

match “/states/countries_state/:country_id” => “states#countries_state”

On Thu, May 3, 2012 at 5:10 PM, Aziz B.
[email protected]wrote:

Couldn't find State with id=countries_state
... Iam

As for rendering the dropdown, this is a pretty simple thing to do with

and how do i render the state drop down in Cilent Form…Thanks…

you are using a nested resource url structure.
// Code to populate cities
var country_states_path = ‘/states/’;
});

});

not work?
[email protected].

To unsubscribe from this group, send email to
–

For more options, visit this group at
“Ruby on Rails: Talk” group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–
Thanks & Regards,
Akshar Jamgaonkar

AJAJAJ · May 3, 2012, 1:52pm

Make sure ur using the currect URL for the new action.

On Thu, May 3, 2012 at 5:18 PM, akshar jamgaonkar <
[email protected]> wrote:

get “home/index”
On Thu, May 3, 2012 at 5:08 PM, akshar jamgaonkar <
AJ
    });
    var country_id = $(this).val();
$(document).ready(function() {

On May 2, 7:14 pm, Hassan S. [email protected]

To unsubscribe from this group, send email to
–
To unsubscribe from this group, send email to
–
To unsubscribe from this group, send email to
–
For more options, visit this group at
“Ruby on Rails: Talk” group.
Thanks & Regards,

–

Aziz M. Bookwala

AJAJAJ · May 3, 2012, 1:49pm

Yea it looks like this…

match “/states/countries_state/:country_id” => “states#countries_state”

resources :clients

resources :skill_sets

resources :technologies

resources :level_of_contacts

resources :states

resources :discounts

resources :countries

resources :roles

get “home/index”

On Thu, May 3, 2012 at 5:15 PM, Aziz B.
[email protected]wrote:

var country_states_path = ‘/states/countries_state/’; however on
Yes, to serve any request made by your client, you would need
   really thanks for you repl..........so do i need to write a
Hey AJ
type: “GET”,
controller, the state id would be available as params[:state]
// Code to populate cities

// Code
<%= f.label :state1 %>

has been

[email protected].
–
[email protected].
–
http://groups.google.com/group/rubyonrails-talk?hl=en.
“Ruby on Rails: Talk” group.
Aziz M. Bookwala

–
You received this message because you are subscribed to the Google G.
“Ruby on Rails: Talk” group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–
Thanks & Regards,
Akshar Jamgaonkar

AJAJAJ · May 3, 2012, 1:55pm

Iam sorry i didnt get you… i have created a new action for the
ajax stuff is this approach wrong… This is how my states controller
is

class StatesController < ApplicationController

GET /states

GET /states.json

def index
@states = State.all

respond_to do |format|
  format.html # index.html.erb
  format.json { render json: @states }
end

end

GET /states/1

GET /states/1.json

def show
@state = State.find(params[:id])

respond_to do |format|
  format.html # show.html.erb
  format.json { render json: @state }
end

end

GET /states/new

GET /states/new.json

def new
@state = State.new
respond_to do |format|
format.html # new.html.erb
format.json { render json: @state }
end
end

GET /states/1/edit

def edit
@state = State.find(params[:id])
end

POST /states

POST /states.json

def create
@state = State.new(params[:state])

respond_to do |format|
  if @state.save
    format.html { redirect_to @state, notice: 'State was

successfully
created.’ }
format.json { render json: @state, status: :created, location:
@state }
else
format.html { render action: “new” }
format.json { render json: @state.errors, status:
:unprocessable_entity }
end
end
end

def countries_state
@state = State.find(“country_id = :c_id”,{:c_id => params[:country]})
respond_to do |format|
format.html
format.js
end
end

PUT /states/1

PUT /states/1.json

def update
@state = State.find(params[:id])

respond_to do |format|
  if @state.update_attributes(params[:state])
    format.html { redirect_to @state, notice: 'State was

successfully
updated.’ }
format.json { head :ok }
else
format.html { render action: “edit” }
format.json { render json: @state.errors, status:
:unprocessable_entity }
end
end
end

DELETE /states/1

DELETE /states/1.json

def destroy
@state = State.find(params[:id])
@state.destroy

respond_to do |format|
  format.html { redirect_to states_url }
  format.json { head :ok }
end

end
end

On Thu, May 3, 2012 at 5:20 PM, Aziz B.
[email protected]wrote:

resources :discounts
Make sure this route comes before the route entry for the country
var country_states_path = ‘/states/countries_state/’; however on
    $.ajax({
the state_id that was selected currently. Using the below js, in your
success: function(data) {

Hi Hassan,
success: function(data) {

[email protected] wrote:
@gmail.comhttp://about.me/hassanschroeder
http://groups.google.com/group/rubyonrails-talk?hl=en.
To post to this group, send email to
Thanks & Regards,
http://groups.google.com/group/rubyonrails-talk?hl=en.
To post to this group, send email to
Thanks & Regards,
http://groups.google.com/group/rubyonrails-talk?hl=en.
To post to this group, send email to [email protected]
Thanks & Regards,
To unsubscribe from this group, send email to
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–
Thanks & Regards,
Akshar Jamgaonkar

AJAJAJ · May 3, 2012, 2:02pm

That is fine, though you could make it more ‘RESTful’ by adding it as a
nested resource. You can read about that
herehttp://railscasts.com/episodes/139-nested-resources.
The RailsCast is a little old, but you should get the idea.

With respect to your current problem, what is the url you are using in
your
js?

On Thu, May 3, 2012 at 5:23 PM, akshar jamgaonkar <
[email protected]> wrote:

def index
def show
def new
end
format.json { render json: @state, status: :created, location:
@state = State.find(“country_id = :c_id”,{:c_id => params[:country]})
end
  format.json { head :ok }
resources :skill_sets
Couldn't find State with id=countries_state
... Iam
something on the server to handle the request.
controller action that would return me the states depending on the
country
        url: country_states_path.replace(":id", id),

        }
I am Bit of a novoice to this… iam nt sure wether this is
}
<%= f.select ‘state_id’, State.find(:all).collect{|s|

Javascript has been

To unsubscribe from this group, send email to
To unsubscribe from this group, send email to
To unsubscribe from this group, send email to
[email protected].
–
http://groups.google.com/group/rubyonrails-talk?hl=en.
“Ruby on Rails: Talk” group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–

Aziz M. Bookwala

AJAJAJ · May 3, 2012, 2:07pm

Not a problem.

On Thu, May 3, 2012 at 5:32 PM, akshar jamgaonkar <
[email protected]> wrote:

your js?

end
end
end
  end

  else
@state = State.find(params[:id])
resources :states
On Thu, May 3, 2012 at 5:15 PM, Aziz B. <[email protected]
On Thu, May 3, 2012 at 5:08 PM, akshar jamgaonkar <
AJ
    });
    var country_id = $(this).val();
});

Thanks & Regards,

You received this message because you are subscribed to the

For more options, visit this group at
You received this message because you are subscribed to the
For more options, visit this group at
You received this message because you are subscribed to the Google
For more options, visit this group at
You received this message because you are subscribed to the Google
For more options, visit this group at
You received this message because you are subscribed to the Google
http://groups.google.com/group/rubyonrails-talk?hl=en.
Groups “Ruby on Rails: Talk” group.
Aziz M. Bookwala
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–

Aziz M. Bookwala

AJAJAJ · May 3, 2012, 2:04pm

Thanks Aziz …thanks a lot…really appriaciate your help

On Thu, May 3, 2012 at 5:31 PM, Aziz B.
[email protected]wrote:

def index
def show
def new
end
format.json { render json: @state, status: :created, location:
@state = State.find(“country_id = :c_id”,{:c_id => params[:country]})
end
  format.json { head :ok }
resources :skill_sets
[email protected]> wrote:
console its giving me eroor like
Yes, to serve any request made by your client, you would need
   really thanks for you repl..........so do i need to write
Hey AJ
type: “GET”,
controller, the state id would be available as params[:state]
// Code to populate cities

Hi Hassan,
success: function(data) {

Hassan S. ------------------------ hassan.schroe…
For more options, visit this group at
Google G. “Ruby on Rails: Talk” group.
–
For more options, visit this group at
Groups “Ruby on Rails: Talk” group.
–
For more options, visit this group at
Groups “Ruby on Rails: Talk” group.
–
For more options, visit this group at
Groups “Ruby on Rails: Talk” group.
–
http://groups.google.com/group/rubyonrails-talk?hl=en.
To post to this group, send email to [email protected].
Akshar Jamgaonkar
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–
Thanks & Regards,
Akshar Jamgaonkar

AJAJAJ · May 3, 2012, 2:29pm

Also in the def countries_state
@state = State.where(“country_id = :c_id”,{:c_id =>
params[:country_id]})
respond_to do |format|
format.html
end
end

previously the it was format.js when nothing on the page was changing
dynamically but when i make it format.html, the state drop down changes
but
i get all the unnecessary thing like the the entire html page.

Thanks

On Thu, May 3, 2012 at 5:47 PM, akshar jamgaonkar <
[email protected]> wrote:

var country_states_path = '/states/countries_state/';
});
Thanks Aziz …thanks a lot…really appriaciate your help

end
end
end
  end

  else
@state = State.find(params[:id])
resources :level_of_contacts

struggling to find what;s going wrong as iam pretty new to all

As for rendering the dropdown, this is a pretty simple thing to

country and how do i render the state drop down in Cilent
Form…Thanks…

In your ajax call, you need to pass the id of the selected
success: function(data) {
$(document).ready(function() {
});

I am Bit of a novoice to this… iam nt sure wether this
}
<%= f.select ‘state_id’, State.find(:all).collect{|s|
Thanks in advance.

[email protected] wrote:
@gmail.comhttp://about.me/hassanschroeder
http://groups.google.com/group/rubyonrails-talk?hl=en.
To post to this group, send email to
Thanks & Regards,
http://groups.google.com/group/rubyonrails-talk?hl=en.
To post to this group, send email to
Thanks & Regards,
http://groups.google.com/group/rubyonrails-talk?hl=en.
To post to this group, send email to
Thanks & Regards,
http://groups.google.com/group/rubyonrails-talk?hl=en.
To post to this group, send email to
Thanks & Regards,
http://groups.google.com/group/rubyonrails-talk?hl=en.
To post to this group, send email to
Thanks & Regards,
http://groups.google.com/group/rubyonrails-talk?hl=en.
To post to this group, send email to [email protected].
Akshar Jamgaonkar
[email protected].

–
Thanks & Regards,
Akshar Jamgaonkar