Custom javascript in rails_admin , jQuery event binding

jquery, rails-admin, ruby-on-rails, ruby-on-rails-3

Solution

Try:

$(document).on('change', '#image_type',function () {
  alert("change triggered");
});

Problem

I am trying to build a drag and drop image association in rails_admin. I have place model and many images associated with that place. Image will be uploaded before and associated with place. I created custom action in rails_admin. rails_admin.rb ``` # Registering Custom Actions module RailsAdmin module Config module Actions class ImageAssociate < RailsAdmin::Config::Actions::Base RailsAdmin::Config::Actions.register(self) end end end end # Adding Custome action to RA actions config.actions do dashboard index new show edit delete image_associate end ``` rails_admin_image_associate.rb in lib directory ``` require 'rails_admin/config/actions' require 'rails_admin/config/actions/base' module RailsAdminImageAssociate end module RailsAdmin module Config module Actions class ImageAssociate < RailsAdmin::Config::Actions::Base register_instance_option :link_icon do 'icon-picture' end # Its Memeber Function register_instance_option :member do true end register_instance_option :controller do Proc.new do @associated_images = @object.images @images = Image.all - @associated_images # binding.pry @image_type = @images.collect(&:asset_type) # flash[:notice] = "You have approved the review titled: #{@object.name}" end end end end end end ``` I added it in rails_admin.rb ``` require Rails.root.join('lib', 'rails_admin_image_associate.rb') ``` views/rails_admin/main/image_associate.rb ``` <%= stylesheet_link_tag "rails_admin/image_associate.css" %> <div id="all_images" class="span4"> <select name="image_type" id="image_type"> <option value="all">all</option> <% @image_type.each do |type| %> <option value="<%=type%>"><%=type%></option> <%end%> </select> <% @images.each do |image| %> <img src="<%=image.file.thumb%>"> <%end%> </div> <div id="associated_images" class="span7"> <% @associated_images.each do |aimage| %> <img src="<%=aimage.file.thumb%>"> <%end%> </div> <div class="clearfix"> </div> ``` Now I need to trigger a "change event" on the select box "image_type". I override the "ui.js" in rails_admin and included the custom js file asset/javascript/rails_admin/custom/ui.js ``` //= require_tree . ``` asset/javascript/rails_admin/custom/image_associate.js ``` $('#image_type').on('change',function () { alert("change triggered"); }); ``` I can see this file is loaded in front end. But the event is not triggering. SCREENSHOT

Original source