CODEWITHSUNDEEP
javascriptjqueryruby-on-railsruby
Rorschach
Rorschach

Reputation: 3812

Adding a javascript line to a ruby site written in slim

I was given a javascript line that calls a javascript file which is made by a company called walkme.

I have an app/assets/javascript/application.js file that calls all of my jquery that I am using for the site. for example it contains:

require feed

which calls feed.js when someone is on the feed page. I would like the walkme.js to also be called at the same time this code is called

I am looking for a way to add this <script ... code to a ruby site that uses slim and jquery. 

<script type="text/javascript">(function() {var walkme = document.createElement('script'); walkme.type = 'text/javascript'; walkme.async = true; walkme.src = 'https://cdn.walkme.com/thewalkme.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(walkme, s); window._walkmeConfig = {smartLoad:true}; })();</script>

I have tried a blunt style of just making a walkme.js in the same place as the feed.js and putting that <script ... code in that file while adding the necessary require walkme code, but that seems to do nothing.

Some info:

As you may be able to tell, I did not make all the ruby code and am not an expert in ruby, javascript or jquery.

If this was just an html site, I think could just add the line of code to the header.

Upvotes: 0

Views: 910

Answers (1)

x6iae
x6iae

Reputation: 4164

Mostly, Javascripts are called after the page has finished loading, since you want to manipulate the DOM, most likely.

So, you either don't want to call the script in the head of your document, unless you have a document.ready in the script.

To answer your question then, if you want the following script:

function(){
  var walkme = document.createElement('script');
  walkme.type = 'text/javascript';
  walkme.async = true;
  walkme.src = 'https://cdn.walkme.com/thewalkme.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(walkme, s);
  window._walkmeConfig = {smartLoad:true};
};

to be available only on the feed page of your application,

You can make this function a named function, in a separate file (say feed.js.coffee for example) and call the function in your slim view page as follow:

//feed.js.coffee:
@feed = ->
  walkme = document.createElement('script')
  walkme.type = 'text/javascript'
  walkme.async = true
  walkme.src = 'https://cdn.walkme.com/thewalkme.js'
  s = document.getElementsByTagName('script')[0]
  s.parentNode.insertBefore walkme, s
  window._walkmeConfig = smartLoad: true
  return

and in your view:

/feed.html.slim:
...
  your codes...
...
coffeeview:
  feed

Upvotes: 2

Related Questions