Custom javascript in rails_admin , jQuery event binding

Question

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

Answer 1

Try:

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