Home/ Questions/Q 7741429
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T09:01:39+00:00

Lets say there are two pages with two different html elements which have the

  • 0

Lets say there are two pages with two different html elements which have the same name

a.html
<select id='collection_select'></select>


b.html
<select id='collection_select'></select>

and there is a javascript function which is only to be applied to a.html

a.js
$(function(){
  $('#collection_select').change(function(){
    ....
  })
})

Becase Rails concatenates all JS assets, this function will now also apply to b.html. Is there a Rails/Sprockets/JS best practice to structure and namespace JS assets in a particular way so that the scope of the JS is limited to a particular page.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This blog post presents a good way of going this: http://viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution

    To summarize it involves

    1. Putting a data-controller attribute on the <body> tag.
    2. Scoping all the JS in a namespace.
    3. A JS Util then matches and loads the JS in the JS namespace for the data-controller by convention.

    Cheers

    • 0