Activeadmin stops my jQuery working

Question

I'm using jquery drag and drop in my app and it works fine.

I then added activeadmin and it stops my jquery working.

I get this error

$(".draggable_article_image").draggable is not a function

If I remove this line from active_admin.js

//= require active_admin/base

it starts working again.

Any ideas?

Answer 1

Try moving your active_admin.js file to the vendor/assets/javascripts folder of your Rails project : you should be fine.

Please let us know if it helped someone!

Regards

Answer 2

I had an error with the code above, so I tweaked mine a bit:

active admin init:

  config.clear_javascripts!
  config.register_javascript 'admin/active_admin.js'

  current_javascripts = config.javascripts.clone
  config.clear_javascripts!
  config.register_javascript 'application.js'
  current_javascripts.each{ |j| config.register_javascript j }

active admin js

  //= require active_admin/base

That's it!

Answer 3

If you look at the activeadmin base manifest file you'll see where the additional jquery load is called. The last call in the base manifest is to the activeadmin application manifest. Therefore there is an easy way to bypass the unwanted additional jquery load.

Change this line in you application's /app/assets/javascripts/active_admin.js:

//= require active_admin/base

To

//= require active_admin/application

That way active admin's javascript code will be loaded without reloading jquery.

Within the /admin space, active admin loads active_admin.js without loading application.js, so you need to load application.js there too. To work, you need to make active admin load application.js before active_admin.js. Add this to config/initializers/active_admin.rb:

current_javascripts = config.javascripts.clone
config.clear_javascripts! 
config.register_javascript 'application.js'
current_javascripts.reverse.each{|j| config.register_javascript j}

However, note that for this to work seamlessly, you may need all these declarations in your app's application.js manifest:

//= require jquery
//= require jquery-ui
//= require jquery_ujs

Also as application.js is being loaded within active admin, you need to manage any namespace conflicts yourself.