0

I have a lot of $(function () {}); (document.ready) javascript functions that are the same across my different web pages. However I don't know how to 'share' them such that I can keep them all in one place without having to copy+paste them every single time.

i.e. in Rails, I've tried putting some of the shared code in my javascript asset pipeline but it doesn't run (unless I refresh the page once after loading). The javascript unique to the current page does run, though.

Any ideas?

UPDATE

Saiqul's answer works, but what I ended up doing and what I found best was to do this: https://stackoverflow.com/a/18834209/3776339

Community
  • 1
  • 1
Joseph Ho
  • 69
  • 1
  • 1
  • 9
  • Client side languages like javascript cannot persist across pages. So you will have to have a `ready` function on every separate script. – Sterling Archer Jul 29 '14 at 18:46
  • put all your scripts into one .js and just reference that file on all your pages. Viola one source, included in every page that you want it. – TWhite Jul 29 '14 at 18:47
  • @TWhite ew no, that's how scripts have thousands of lines are born, and only a fraction of the code is relevant to what you need. Absolute terrible practice – Sterling Archer Jul 29 '14 at 18:48
  • @Sterling Archer Only include that code that is repeated not ALL the js. Unless I'm not understanding the OP's original question. – TWhite Jul 29 '14 at 18:49
  • @TWhite I suppose that is the issue I'm trying to solve. How would you go about 'referencing' that .js file? Like I've mentioned, I've tried a form of that. I called the shared javascript in my document.ready function. But it doesn't run unless I refresh the page once. – Joseph Ho Jul 29 '14 at 19:07

2 Answers2

1

what rails version you use? if rails 4+, u need more document event listener like $(document).on('page:change', function(){}) because rails 4+ using turbolinks gem to make loading page faster, so your jQuery.ready() listeners only executed at first page load, not working in another page.

There are some events provided by turbolinks:

  • page:before-change
  • page:fetch starting to fetch a new target page
  • page:receive the page has been fetched from the server, but not yet parsed
  • page:change the page has been parsed and changed to the new version and on DOMContentLoaded
  • page:update is triggered whenever page:change is PLUS on jQuery's ajaxSucess, if jQuery is available (otherwise you can manually trigger it when calling XMLHttpRequest in your own code)
  • page:load is fired at the end of the loading process.

Or you can use jquery.turbolinks gem which will trigger jQuery.ready() when Turbolinks triggers the the page:load event.

Update

this is my js code in my rails app

I encapsulate the js code that must be run on every page within a single function

var ready = function(){
  $('somEl').on('change', function(){ 
    .... 
  });
  $('otherEl').on('click', function(){ 
    .... 
  });
});

and then execute on three event listener

$(document).ready(ready) // jquery event

$(document).on("page:fetch", function(){ // turbolinks event
  ready();

  // you can add more code here, which will be fired when turbolinks starting fecth new page
}
$(document).on("page:change", function(){  // turbolinks event
  ready();

  // you can add more code here too
}
Saiqul Haq
  • 2,287
  • 16
  • 18
  • Lead me to the answer perfectly. I used the page:change listener for all my shared javascript. However, it was also good to note to put the other shared javascript bound to the document like .click and .hover outside the function. The best description of the solution was found [here](http://stackoverflow.com/a/19834224/3776339) – Joseph Ho Jul 30 '14 at 19:04
  • Hey, that works. But found a better solution for Rails 4+ users. See it here: http://stackoverflow.com/a/18834209/3776339 – Joseph Ho Jul 30 '14 at 20:23
  • I have mentioned about jquery.turbolinks gem too – Saiqul Haq Jul 30 '14 at 20:34
0

Try this question and see if it helps: Include JavaScript in Ruby (on Rails)

Also this blog has a discussion on how best to add the JS: Ruby on Rails layouts and JavaScript includes

And one more google search result: Adding javascript to rails

Community
  • 1
  • 1
TWhite
  • 737
  • 2
  • 11
  • 33