10

I'm attempting to run javascript on specific pages and my only solution seems like an anti-pattern. I have controller.js generated inside of assets/javascripts/. I'm using gem 'jquery-turbolinks' I have code resembling the following:

$(document).ready(function () {
    //Initiate DataTables ect..
    }
)

This code is firing on every page So I added the following inside of it.

if ($('#page-specific_element').length > 0) {
    //Initiate Datatables ect.
}

My question being, is there a way to set rails to utilize only the javascript files necessary to a specific controller or is logic gating behind an element search the best solution?

1
  • I've tried adding <%= javascript_include_tag params[:controller] %> to application.html.erb and removing //= require_tree . from application.js as part of a solution, but I run in to a need to add each "controller.js" to a pre-compile assets file, which seems to be going down the wrong road.
    – Maleki
    May 8, 2015 at 22:31

2 Answers 2

17

This is a pretty nice turbolinks specific solution:

<body data-controller="<%= controller.controller_name %>" data-action="<%= controller.action_name %>">

// Instead of listening for document ready
$(document).on('users#show:loaded', function(){
    $('#logger').append('<li>Users Show action loaded</li>');
});

// Instead of listening for document ready
$(document).on('users:loaded', function(){
    $('#logger').append('<li>Some users controller method loaded</li>');
});

// Turbolinks fires "page:change" when it changes the page content.
// you could change this to just document ready if you are not using 
// turbolinks.
$(document).on("page:change", function(){
  var data = $('body').data();
  $(document).trigger(data.controller + ':loaded');
  $(document).trigger(data.controller + '#' + data.action + ':loaded');
});

// This is just for demonstration purposes...
$(document).trigger("page:change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body data-controller="users" data-action="show">

  <ul id="logger"></ul>
</body>

You should note that if you are using Turbolinks that you'll have a long-running, persistent session with maintained state. Which means that if you add inline script tags or load additional javascript files in your views they will linger in the browsers memory.

You therefore might therefore want to cleanup whatever page specific event handlers you have created on page:before-unload.

4
  • Extremely elegant undiscovered Turbolinks jewel! Oct 14, 2015 at 3:04
  • I have released a gem based on this pattern. github.com/maxcal/pagescript
    – max
    Oct 20, 2016 at 0:39
  • @max , cannot install this gem for rails 5.1.3 Feb 20, 2019 at 3:21
  • @SyamsoulAzrien can you create an issue on github?
    – max
    Feb 20, 2019 at 10:46
1

There are many ways to do this. I'll describe one.

I use this old gem to wrap all my .module.js files in commonjs modules.

I then have a helper that writes something like the following to a <script> tag in the head of every HTML page.

<script>
  var App {
    pageModule: 'posts/create'
  };
</script>

posts/create is generated from a simplified mix of the current controller and action rendering the request.

I then have something like the following in my domready for my application.js.

try { App.pageModule = require(App.pageModule); } catch(e) { console.log('%c' + e, 'color:red; background-color:yellow'); }

if (_.isPlainObject(App.pageModule) && _.has(App.pageModule, 'initialize')) {
  App.pageModule.initialize();
}

Finally, I'll have a file like this which is specific to the /posts/create URL.

app/assets/posts/create.module.js

module.exports = {

  initialize: function() {
    // data-tables stuff here...
  }

}
1

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.