Skip to main content

How to implement dependent dropdowns in Rails 4 with an unobtrusive jQuery script ?

How to implement dependent dropdowns in Rails 4 with an unobtrusive jQuery script?

class SpecializationType < ActiveRecord::Base
  # FIELDS
  # RELATIONS
  has_many :specializations
  # TRIGGERS
  # VALIDATIONS
  validates :name, :presence => true
  validates :description, :presence => true
  # SCOPES
  # OTHER
  def to_s
    name
  end
end


class Specialization < ActiveRecord::Base
  # FIELDS
  # RELATIONS
  belongs_to :specialization_type
  has_and_belongs_to_many :users
  # TRIGGERS
  # VALIDATIONS
  validates :name, :presence => true
  validates :description, :presence => true
  validates :specialization_type, :presence => true
  # SCOPES
  # OTHER
  def to_s
    name
  end
end

in views
<%= form_tag users_path, {:method => :get, :class => "users_search_form"} do %>
      <%= select_tag :specialization_type_id, options_from_collection_for_select(SpecializationType.all, "id", "name"), :prompt => "Select a specialization type" %>
      <%= select_tag :specialization_id, options_from_collection_for_select([], "id", "name"),
                     "data-option-dependent" => true,
                     "data-option-observed" => "specialization_type_id",
                     "data-option-url" => "/specialization_types/:specialization_type_id:/specializations.json",
                     "data-option-key-method" => :id,
                     "data-option-value-method" => :name %>
      <br/>
      <%= submit_tag "Cerca" %>
  <% end %>

  In particular:

“data-option-dependent” => true, indicates that this depends on a dropdown dropdown father
“data-option-observed” => “specialization_type_id”, specifies the id of the dropdown to be monitored. If its value changes, we’ll trigger the request to the server
“data-option-url” => “/specialization_type/:specialization_type_id:/specializations.json” is the url that we are going to call on the server. The script will replace :specialization_type_id: the id of the selected item in the dropdown father.
“data-option-key-method” => :id, indicates that we’ll use the ID field of the json returned by the server as attribute “key” for < option >
“data-option-value-method” => :name, indicates that we’ll use the NAME field in the json returned by the server as attribute “value” of < option >

Let’s add this jQuery script in the application.js file, in order to handle all dependent dropdown of our code

jQuery(document).ready(function () {
        $('select[data-option-dependent=true]').each(function (i) {
            var observer_dom_id = $(this).attr('id');
            var observed_dom_id = $(this).data('option-observed');
            var url_mask = $(this).data('option-url');
            var key_method = $(this).data('option-key-method');
            var value_method = $(this).data('option-value-method');
            var prompt = $(this).has('option[value=]').size() ? $(this).find('option[value=]') : $('<option value=\"\">').text('Select a specialization');
            var regexp = /:[0-9a-zA-Z_]+:/g;
            var observer = $('select#' + observer_dom_id);
            var observed = $('#' + observed_dom_id);

            if (!observer.val() && observed.size() > 1) {
                observer.attr('disabled', true);
            }
            observed.on('change', function () {
                observer.empty().append(prompt);
                if (observed.val()) {
                    url = url_mask.replace(regexp, observed.val());
                    $.getJSON(url, function (data) {
                        $.each(data, function (i, object) {
                            observer.append($('<option>').attr('value', object[key_method]).text(object[value_method]));
                            observer.attr('disabled', false);
                        });
                    });
                }
            });
        });
    });

    routes ---> 1
   
get "specialization_types/:specialization_type_id/specializations" => "application#specializations", :as => "specializations", :format => :json

def specializations
  specialization_type = SpecializationType.find(params[:specialization_type_id])
  respond_to do |format|
    format.json { render :json => specialization_type.specializations }
  end
end

Comments

Popular posts from this blog

Gem::LoadError (Specified 'mysql2' for database adapter, but the gem is not loaded. Add `gem 'mysql2'` to your Gemfile (and ensure its version is at the minimum required by ActiveRecord).?

Gem::LoadError (Specified 'mysql2' for database adapter, but the gem is not loaded. Add `gem 'mysql2'` to your Gemfile (and ensure its version is at the minimum required by ActiveRecord).) In rails?


1)change the gemfile in mysql version
 gem 'mysql2'

2)Change to mysql2 version
 gem 'mysql2','0.3.20'

Get user accessing ip address in rails?

Get user accessing ip address rails?

request.ip ->returns the ip, whether is is a local proxy ip (localhost address) or not.
*request.remote_ip -> is smarter and gets the ip address of the client outside of local proxies.
3)If you are using apache in front of a mongrel, then remote_ip will return the source address of the request, which in this case will be local host because the Apache web server is making the request, so instead put this in your controller:

@remote_ip = request.env["HTTP_X_FORWARDED_FOR"]

PayUMoney Integration in Ruby on Rails

PayUMoney Integration in Ruby on Rails


Generating Cheksum in Payu
   Hash or Checksum
= sha512(key|txnid|amount|productinfo|firstname|email|u
df1|udf2|udf3|udf4|udf5||||||salt)



Controller Code Will be
def payumoney
  @key = "gtKFFx"
  @salt =  "eCwWELxi"
  val = "#{key|txnid|amount|productinfo|firstname|email|u
df1|udf2|udf3|udf4|udf5||||||#{@salt}"
 @checksum = Digest::SHA512.hexdigest("#{val}")
end

<form action="https://test.payu.in/_payment" method='post' id='sub'  >
    <input type="hidden" name="key" value="<%=@key%>">
    <input type="hidden" name="hash" value="<%=@checksum%>">
    <input type="hidden" name="txnid" value="TXN1234">
    <input type="hidden" name="amount" value="200">
    <input type="hidden" name="firstname" value=&quo…