Country State City using AJAX

[AJ]

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

[Lauro Caetano]

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

2012/5/2 AJ <akshar.j...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To post to this group, send email to rubyonra...@googlegroups.com.
To unsubscribe from this group, send email to rubyonrails-ta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.

[akshar jamgaonkar]

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

--
Thanks & Regards,
Akshar Jamgaonkar

[Hassan Schroeder]

On Wed, May 2, 2012 at 7:06 AM, akshar jamgaonkar
<akshar.j...@gmail.com> 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 Schroeder ------------------------ hassan.s...@gmail.com
http://about.me/hassanschroeder
twitter: @hassan

[AJ]

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,

On May 2, 7:14 pm, Hassan Schroeder <hassan.schroe...@gmail.com>
wrote:

> On Wed, May 2, 2012 at 7:06 AM, akshar jamgaonkar
>

> <akshar.jamgaon...@gmail.com> 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 Schroeder ------------------------ hassan.schroe...@gmail.comhttp://about.me/hassanschroeder
> twitter: @hassan

[Aziz Bookwala]

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

> twitter: @hassan

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To post to this group, send email to rubyonra...@googlegroups.com.
To unsubscribe from this group, send email to rubyonrails-ta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.

--
- Aziz M. Bookwala

[akshar jamgaonkar]

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

[Aziz Bookwala]

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.

[akshar jamgaonkar]

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

 <pre>Couldn't find State with id=countries_state</pre> ... Iam struggling to find what;s going wrong as iam pretty new to all this...thanks a lot all of you for your help......

[Aziz Bookwala]

Did you add a route for this new action?

[akshar jamgaonkar]

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

[akshar jamgaonkar]

Yes i have added....it looks like this

match "/states/countries_state/:country_id" => "states#countries_state"

[Aziz Bookwala]

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

[akshar jamgaonkar]

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"

[Aziz Bookwala]

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

[akshar jamgaonkar]

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

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[Aziz Bookwala]

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?

[akshar jamgaonkar]

Thanks Aziz ....thanks a lot...really appriaciate your help

[Aziz Bookwala]

Not a problem.

[akshar jamgaonkar]

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 "[[&quot;Goa&quot;, 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)

            }

        });

    });

});

[akshar jamgaonkar]

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

[akshar jamgaonkar]

Hi all,

I have succesfully got a responce like this as to what i want , this is the ouptut in my fireofx console.

<select id="states_state_id" name="states[state_id]"><option value="1">Maharashtra</option></select>.

but the html on the page is not updating.......any reson why this could be ...thanks a lot....

[AJ]

Hello All,

ill just summarize everything in this message..kindly suggest as to
what might be wrong


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Iam trying to achiev a functionlity of state drop down
been populated on click of country........i have achieved almost 90%
of this......iam getting appropriate responce in my firebug. responce
is like this when i click india.....

<select id="states_state_id" name="states[state_id]"><option

value="2">Goa</option></select>


my application .js looks like this

$(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_state_id").html(data)
}
});
});
});



the controller state has an action like this

def countries_state
@state = State.where("country_id = :c_id",{:c_id =>
params[:country_id]})
respond_to do |format|

format.js
end
end



and template for this action is like

<%= select("states", "state_id", @state.collect{|s| [s.name,s.id]}) %>


However i am getting the response in firebug but the html on page is
not updated. Iam trying to find but iam stuck as iam a bit new to all
this.


Please suggest as to what might be wrong. thanks a lot


Thanks & Regards,
Akshar







-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


On May 3, 5:52 pm, akshar jamgaonkar <akshar.jamgaon...@gmail.com>
wrote:

> >> On Thu, May 3, 2012 at 5:36 PM, Aziz Bookwala <aziz.bookw...@gmail.com>wrote:
>
> >>> Not a problem.
>
> >>> On Thu, May 3, 2012 at 5:32 PM, akshar jamgaonkar <
> >>> akshar.jamgaon...@gmail.com> wrote:
>
> >>>> Thanks Aziz ....thanks a lot...really appriaciate your help
>

> >>>> On Thu, May 3, 2012 at 5:31 PM, Aziz Bookwala <aziz.bookw...@gmail.com>wrote:
>
> >>>>> That is fine, though you could make it more 'RESTful' by adding it as

> >>>>> a nested resource. You can read about that here<http://railscasts.com/episodes/139-nested-resources>.

> ...
>
> read more »

[Jeremy Walker]

On 3 May 2012, at 14:06, AJ <akshar.j...@gmail.com> wrote:

> Hello All,
>
> ill just summarize everything in this message..kindly suggest as to
> what might be wrong

Do you have a div with the id of "client_state_id"? What do you get if you run $("#client_state_id") in firebug?

Jeremy Walker

[akshar jamgaonkar]

Yes i  have a Select box with this id = "client_state_id" .. when i run   $("#client_state_id") the select drop down control gets highlighted. Thanks

[Jeremy Walker]

On 3 May 2012, at 14:24, akshar jamgaonkar <akshar.j...@gmail.com> wrote:

Yes i  have a Select box with this id = "client_state_id" .. when i run   $("#client_state_id") the select drop down control gets highlighted. Thanks

Try using replaceWith() instead of html() in your success function. 

[akshar jamgaonkar]

HEy cool.. Thanks a lot...it worked however with state drop down i also iam getting a lot of  other un necessary html...... The html is what i have written in application.html.erb for templating purpose....... Is this the wrong way to write static html code in application.html.erb... Thanks a lot....

[Jeremy Walker]

On 3 May 2012 14:38, akshar jamgaonkar <akshar.j...@gmail.com> wrote:

HEy cool.. Thanks a lot...it worked however with state drop down i also iam getting a lot of  other un necessary html...... The html is what i have written in application.html.erb for templating purpose....... Is this the wrong way to write static html code in application.html.erb... Thanks a lot....

You need to tell your view not render the layout. You should read the Rails guide to rendering and layouts. I'll let you figure it out from there:

http://guides.rubyonrails.org/layouts_and_rendering.html

Just for your reference, I feel that a better way of achieving what you're doing would be:

* Have nested routes for countries and states and call the url at /countries/1/states.json (http://guides.rubyonrails.org/routing.html#nested-resources)

* Have the index method of the StatesController respond to the .json request and render the states back as a JSON array. Let the browser and create the <option> tags using Javascript.

IMHO that way is quicker, slicker and more maintainable.

Also, in your current form, you could replace your $.ajax method with:

$.get(country_states_path+country_id, function(data) {

        $("#client_state_id").replaceWith(data);

    }

});

Hope that's helpful.

[akshar jamgaonkar]

Hey Guys... All of You... Thanks alot...... i have achieved it........i was struglling on it from 2 3 days....and without all of your help i wouldnt have successeded...... RUBY ON RAILS ROCK....thanks

[Aziz Bookwala]

Hey Akshar

Good to see that you got it working.

- Aziz M. Bookwala

Website | Twitter | Github

[akshar jamgaonkar]

Yea Aziz....thanks a lot

[Antariksha Kulkarni]

I want Country State City using AJAX in rails 4 code.

--
Posted via http://www.ruby-forum.com/.

[Colin Law]

On 16 September 2015 at 14:07, Antariksha Kulkarni <li...@ruby-forum.com> wrote:
> I want Country State City using AJAX in rails 4 code.

The first problem here is that you have asked a very general question
which could mean a number of different things.
Do you mean you want to get these from your own website or are you
looking for another server somewhere that you can get them from? If
from your own website do you already have the data in the database?

Please try to ask more specific questions in future. Otherwise we
spend a lot of time just trying to find out what you are trying to do.

Colin