How to call JS method from "remote: true" response?

I’m trying to call a JS function defined in assets/javascripts/ from a JS partial handling a remote: true controller response, like views/items/update.js.erb.

Or is this a bad idea and I should be doing this another way?

I’m using Isotope in my Rails app, defined in assets/javascripts/library.js and included in the application.js manifest:

# assets/javascripts/library.js

$(document).ready(function() {
  var $grid = $('.item-grid').isotope({
    # options
  });

  # do stuff with $grid
  $grid.on('arrangeComplete', function() {
    # stuff
  });

When an item is updated on the page that triggers a remote: true request I’d like to be able to call the $grid variable from the update.js.erb file:

# views/items/updat.js.erb

# update the item then call
$grid.isotope();

From what I understand, the JS compiled in the manifest file is wrapped in a function to prevent polluting the global namespace.

I’m not really into the idea of making things global just to overcome this problem so what should I look at?

When you run this code now, do you get an error about $grid being undefined?

I think the way to do this would be to assign $grid to window.$grid or preferably to a custom namespace you create if you want to be able to get to it so, something like:

var window.MyNamespace = {};
var window.MyNamesapce.$grid = ...

Then in your response with the JS payload you could call MyNamespace.$grid.isotope() and access the function you were looking for.

2 Likes