SELECT COUNTRY WITH STATE AND IT'S CITIES RAILS

Country State Select is a library that provides an easy API to generate Country , State / Province and City dropdowns for use in forms.

We will refer :-

Gemfile

gem 'chosen-rails'
gem 'country_state_select', git: 'git://github.com/arvindvyas/Country-State-Select', branch: :master
gem "simple_form"#, "~> 3.2"
gem "reform"#, "~> 2.0"
gem "reform-rails"

orders_controller.rb

class OrdersController < ApplicationController
    def shipping_address
        @location = Address.new
    end
end

shipping_address.html.erb

 <%= simple_form_for @location,  :html => {class: 'subscribe-from'} ,url: orders_shipping_address_path do |f| %>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <%= f.input :address_line1, label: "Country", collection: CountryStateSelect.countries_collection %>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <%= f.input :state, CountryStateSelect.state_options(label: "State / Province", form: f, field_names: { :country => :address_line1, :state => :home_state } ) %>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <%= f.text_field :city, CountryStateSelect.city_options(label: "City ", form: f, field_names: {  :state => :state, :city => :home_city } ) %>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <%= f.submit "Sign up", class: "btn btn-success btn-block" %>
    </div>
  </div>
<%end%>

<script type="text/javascript">
    $(document).on('ready page:load', function() {
      return CountryStateSelect({
        chosen_ui: true,
        country_id: "address_address_line1",
        state_id: "address_state",
        city_id: "address_city",
        city_place_holder: "Please select city",
        state_place_holder: 'Please select state'
      });
    });
</script>

Include the JS file :-

country_state_select.js.erb

function CountryStateSelect(options) {
  var state_id = options['state_id'];
  var country_id = options['country_id'];
  var city_id = options['city_id'];

  var state_name = $('#' + state_id).attr('name');
  var state_class = $('#' + state_id).attr('class');

  var city_name = $('#' + city_id).attr('name');
  var city_class = $('#' + city_id).attr('class');

  return statesDropdown();

  // ====== ***** METHODS ***** ===================================================================== //
  function statesDropdown() {

    addChosenToCountry();
    addChosenToState();
    addChosenToCity();

    $("#" + country_id).change(function () {
      return findStates($(this).val());
    });

  }

  function citiesDropdown() {
     $("#" + state_id).change(function () {
      return findCities($("#" + state_id).val(),$("#" + country_id).val());
    });
  }

  function addChosenToState(){
    if (chosenIsRequired() && stateIsNotText()) {
      $('#' + state_id).chosen(options['chosen_options']);
    }
  }

  function addChosenToCity(){
    if (chosenIsRequired() && cityIsNotText()) {
      $('#' + city_id).chosen(options['chosen_options']);
    }
  }

  function stateIsNotText(){
    return !$('#' + state_id).is("[type=text]");
  }

  function cityIsNotText(){
    return !$('#' + city_id).is("[type=text]");
  }

  function addChosenToCountry(){
    if (chosenIsRequired()) {
      $('#' + country_id).chosen(options['chosen_options']);
    }
  }

  function removeChosenFromFields(){
    if (chosenIsRequired()) {
      $("#" + options['state_id'] + "_chosen").remove();
      $("#" + options['city_id'] + "_chosen").remove();
    }
  }

  function removeChosenFromCityFields(){
    if (chosenIsRequired()) {
      $("#" + options['city_id'] + "_chosen").remove();
    }
  }

  function chosenIsRequired(){
    return options.hasOwnProperty("chosen_ui") && options['chosen_ui'];
  }

  function findStates(id) {

    //Remove all Chosen from existing fields
    removeChosenFromFields();
    findCities('','')

    //Perform AJAX request to get the data; on success, build the dropdown
    $.ajax({
      url: "/find_states",
      type: 'post',
      dataType: 'json',
      cache: false,
      data: {country_id: id},
      success: function (data) { buildStatesDropdown(data) }
    });
  }

  function findCities(state_id, country_id) {

    //Remove all Chosen from existing fields
    removeChosenFromCityFields();

    //Perform AJAX request to get the data; on success, build the dropdown
    $.ajax({
      url: "/find_cities",
      type: 'post',

      dataType: 'json',
      cache: false,
      data: {
        country_id: country_id,
        state_id: state_id
      },
      success: function (data) { buildCitiesDropdown(data) }
    });
  }

  //Build the HTML for our dropdown menus
  function buildStatesDropdown(data) {

    if (data.length === 0) {
      html = '<input id="' + state_id + '" name="' + state_name + '" class="' + state_class + '" type="text"  type="text" value="" >';
    } else {
      html = '<select id="' + state_id + '" name="' + state_name + '" class="' + state_class + '" >';
      html += '<option>'+ find_select_option_text('state') +'</option>'

      for (i = 0; i < data.length; i++) {
        html += '<option value='+data[i][0]+'>' + data[i][1] + '</option>';
      }

      html += '</select>';
    }


    $('#' + state_id).replaceWith(html);

    //This has to happen AFTER we've replaced the dropdown or text
    if (data.length > 0) {
      addChosenToState();
    }

    // [142] FIXME # Is there any other way to call city method , it is adding change method in every state change
    if(typeof city_name !== "undefined" ){
      citiesDropdown();
    };

  }

  function find_select_option_text(type){
     if (type === 'city'){
       return options['city_place_holder'];
     }else{
       return options['state_place_holder']
     }

  }

  function buildCitiesDropdown(data) {

    if (data.length === 0) {
      html = '<input id="' + city_id + '" name="' + city_name + '" class="' + city_class + '" type="text"  type="text" value="" >';
    } else {
      html = '<select id="' + city_id + '" name="' + city_name + '" class="' + city_class + '" >';
      html += '<option>'+ find_select_option_text('city') +'</option>'
      for (i = 0; i < data.length; i++) {
        html += '<option>' + data[i] + '</option>';
      }

      html += '</select>';
    }

    $('#' + city_id).replaceWith(html);

    //This has to happen AFTER we've replaced the dropdown or text
    if (data.length > 0) {
      addChosenToCity();
    }
  }
}

Comments

Popular posts from this blog

psql: could not connect to server: No such file or directory Is the server running locally and accepting connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?

CARRIERWAVE - UPLOAD ANY MEDIA (AUDIO , VIDEO AND IMAGE ) FILE IN RAILS

RAILS: UPLOADING PHOTOS VIA AMAZON S3 AND PAPERCLIP (UPLOADING FILES TO S3 IN RUBY WITH PAPERCLIP)

SEARCHING USING AJAX IN RAILS

UPLOAD ANY MEDIA FILE IN RAILS USING PAPERCLIP

UNINITIALIZED CONSTANT PAPERCLIP::STORAGE::S3::AWS

CURL COMMAND ON RUBY ON RAILS

CHECK PASSENGER RUBY PATH