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

Post a Comment

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"?

-
If we are getting error after creating database in postgres like this :- 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"? Then use following link :-  https://stackoverflow.com/questions/42653690/psql-could-not-connect-to-server-no-such-file-or-directory-5432-error sudo chmod 777 -R /var/run/postgresql/ Then restart the postgres:-  sudo service postgresql restart  or   sudo systemctl start postgresql@9.6-main  
Read more

E: Package 'aptitude' has no installation candidate

-
Image
E: Package 'aptitude' has no installation candidate Sometimes, we are getting broken package error. Please can easily solve this problem. Example:-        sudo apt-get install aptitude If you got error like-              E: Package 'aptitude' has no installation candidate Solution:-           sudo apt-get update       sudo apt-get install build-essential       sudo dpkg --configure -a       sudo apt-get -f install None of those worked in my case. I then went to Ubuntu Software Center>Edit> Software Sources and made these changes. After that the following commands did the job       sudo apt-get update         sudo apt-get install build-essential         sudo apt-get install aptitude Now, problem is solved. Please follow the link below:- http://musingsonsoftware.blogspot.com/2014/02/ubuntu-apt-get-package-has-no.html  
Read more

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

-
Image
UPLOADING ANY MEDIA FILE WITH CARRIER-WAVE RAILS Multiple file uploads Add it to your Gemfile:       gem 'mime-types'       gem 'mini_magick'       gem 'rmagick'       gem 'carrierwave', '~> 1.0'       gem 'carrierwave-video'       gem 'carrierwave-video-thumbnailer'       gem 'carrierwave-ffmpeg' Run       bundle Start off by generating an uploader: app/uploaders/vimeo_uploader.rb       rails generate uploader Vimeo Check out this file for some hints on how you can customize your uploader. It should look something like this: class VimeoUploader < CarrierWave::Uploader::Base       storage :file end If we want to upload video or image then we will have to use :- class VimeoUploader < CarrierWave::Uploader::Base       include CarrierWave::MiniMagick       include CarrierWave::Video       include CarrierWave::Video::Thumbnailer       include CarrierWave::FFmpeg       storage :file          de
Read more

SEARCHING USING AJAX IN RAILS

-
Search any entry from Database using ajax Routes        get 'search' Controller        def search           @companies = Company.search(params[:search].split("=").last)           respond_to :js       end Model        def self.search(search)           if search                 Company.where("name LIKE '%#{search}%'")           else                 Company.all           end       end index.html.erb :-       <%= text_field_tag :search, "", class: "search_companies" %>       <tbody class="company_tbody_content">            <%= render 'index_content' %>       </tbody>       <script type="text/javascript">            $(".search_companies").keyup(function() {                $.ajax({                   url: '/super_admin/companies/search',                   data: {search: $(this).serialize()}                });            });       </script>
Read more

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

-
Set up Ruby on Rails with Paperclip and S3 using AWS SDK Uploading Files to S3 in Ruby with Paperclip Paperclip requires the following gems added to your Gemfile. If your paperclip version is 5.1.0 then we are using 'aws-sdk' version 2.3. # Gemfile gem 'paperclip' gem 'aws-sdk', '~> 2.3' or our paperclip version is 4.1.0 then we need to use 'aws-sdk' version < 2  (note: add version less than 2.0 otherwise you will get paperclip error) gem 'paperclip' gem 'aws-sdk', '< 2.0' Run bundle install and restart the Rails server after modifying the Gemfile. Then run the command :- rails generate paperclip user image Define the file attribute in the Model class User < ActiveRecord::Base     has_attached_file :image, styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/images/:style/missing.png"       validates_attachment_content_type :image, cont
Read more

CHECK PASSENGER RUBY PATH

-
When we want to use the passenger with Nginx or Apache. Then we need to find the passenger ruby path. So, we can easily find the ruby path using :- passenger - config -- ruby - command When we run then we will get like :-   Command: /home/rohit/.rvm/gems/ruby -2.1.10/wrappers/ruby   Version: ruby 2.1.10p492 (2016-04-01 revision 54464) [x86_64-linux]   To use in Apache : PassengerRuby /home/rohit/.rvm/gems/ruby -2.1.10/wrappers/ruby   To use in Nginx : passenger_ruby /home/rohit/.rvm/gems/ruby -2.1.10/wrappers/ruby   To use with Standalone: /home/rohit/.rvm/gems/ruby -2.1.10/wrappers/ruby /usr/bin/passenger start Add that line in passenger.conf file
Read more

CURL COMMAND ON RUBY ON RAILS

-
HOW TO USE CURL ON RUBY ON RAILS? LIKE THIS ONE curl - d 'params1[name]=name&params2[email]' 'http://mydomain.com/file.json' Just in case you don't know, it requires 'net/http' require 'net/http'   uri = URI . parse ( "http://example.org" )   # Shortcut   #response = Net::HTTP.post_form(uri, {"user[name]" => "testusername", "user[email]" => "testemail@yahoo.com"})     # Full control   http = Net :: HTTP . new ( uri . host , uri . port )   request = Net :: HTTP :: Post . new ( uri . request_uri )   request . set_form_data ({ "user[name]" => "testusername" , "user[email]" => "testemail@yahoo.com" })   response = http . request ( request )   render : json => response .body Hope it'll helps others.. :) We can also follow the link below :- https://stackoverflow.com/questions/15804425/curl-on-rub
Read more

SHOW LINE NUMBER OF TEXT AREA

-
WHEN WE ENTER , SHOW LINE NUMBER IN TEXT AREA HTML PAGE:- <textarea class="line-numbers" cols="3" readonly="readonly" rows="5"></textarea> <%= text_area_tag :query_editor, '' :name => "query_editor", :class => "add_query_editor" %> <script type="text/javascript">    $(".add_query_editor").keyup(function(event) {      $(this).prev().height($(this).height());      $(this).prev()[0].scrollTop = this.scrollTop;    });    $(".add_query_editor").keyup(function(event) {      var elm = $(this);      var lines = elm.val().split("\n");      var numbers = "";      for(var i=0; i<lines.length; i++)      numbers += (i+1) + "\n";      elm.prev().val(numbers);      elm.prev()[0].scrollTop = this.scrollTop;   }); </script> <style type="text/css">    .line-numbers {       background-color: aqua       text-align: rig
Read more