Country State City using AJAX

rubyonrails-talk
1

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

2

This is a good resource to start: http://railscasts.com/episodes/88-dynamic-select-menus

3

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

4

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

5

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

  <div class="field row odd">     <%= f.label :state1 %>      <%= f.select 'state_id', State.find(:all).collect{|s| [s.name,s.id]} %>   </div>

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,

6

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
        }
    });
});

});

7

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

8

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.

9

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......
10

Did you add a route for this new action?

11

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

12

Yes i have added…it looks like this

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

13

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

14

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”

15

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

16

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

17

That is fine, though you could make it more ‘RESTful’ by adding it as a nested resource. You can read about that here. 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?

18

Thanks Aziz …thanks a lot…really appriaciate your help

19

Not a problem.

20

Hi Aziz…

Iam getting whatevr reponce iam nneding,… Thansk a lot…in the console in firbug when i see i get the states for a specific counytry…The responce is like “[["Goa", 2]]” … however whatever processing i do in application.js in not taking effect,

My application.js is

$(document).ready(function() {

var country_states_path = ‘/states/countries_state/’;

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

var country_id = $(this).val();

$.ajax({

type: “GET”,

data: {country: country_id},

url: country_states_path+country_id,

success: function(data) {

$(“#client_country_id”).html(data)

}

});

});

});