2

I am fairly new to programming and testing to see if jquery works with my rails 6 setup. In order to do this I have:

  1. created a new rails application
  2. generated a scaffold
  3. inserted the following code into the index.html.erb view of the newly created scaffold
<script type='text/javascript'>
  $('#mydiv').show();
</script>

<div id='mydiv' style='display:none'>
   TEST
</div>

I would expect this to display the TEST text.. But it doesn't seem to appear even though the rest of the page renders... Any help very welcome...

mrzasa
  • 22,895
  • 11
  • 56
  • 94
Tomas
  • 318
  • 3
  • 11
  • Do you see any errors in your developer `console`, if so, can you add them to your question? –  Oct 12 '19 at 00:07
  • There are no errors in the Rails Command Line. I'm not sure if this is what you mean...? There is also nothing in console under "developer tools" in chrome - just incase I misunderstood your question... – Tomas Oct 12 '19 at 08:33
  • You understood my question right. So in your scaffold index view page --> Right click somewhere on the page --> Click `View Page Source` --> then can you see the ` –  Oct 12 '19 at 12:44
  • Yes - I can see the – Tomas Oct 12 '19 at 14:30
  • did you actually add jquery to your project? it doesn't come on rails by default, you have to add it, if so, show how you did it – arieljuod Oct 12 '19 at 14:31
  • I think I did. I am using rails 6 and I did "yarn add jquery". Previously I had followed these instructions but that didn't seem to work either - https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker – Tomas Oct 12 '19 at 14:36
  • @Tomas Can you test by adding Jquery CDN `` tag above your custom ` –  Oct 13 '19 at 06:38
  • Yes that works! Fantastic. Thankyou... Does this give a hint of what I am doing wrong...? – Tomas Oct 13 '19 at 08:06
  • Ok I have not got it to work I think. I added this code into environment.js - ```const webpack = require('webpack') environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery' }) )``` I think It was a combination of this and as the answer below the fact that I had the script above the DIV. A bit new to Stack Overflow so I'm not entirely sure how to close the thread up and make sure the answer is clear as it was a combination of a couple of things... Thanks for the help. – Tomas Oct 13 '19 at 08:48

1 Answers1

1

Move the script below the div, so that the div is loaded when the script is executed:

 <div id='mydiv' style='display:none'>
   TEST
 </div>
 <script type='text/javascript'>
   $('#mydiv').show();
 </script>

Or you need to call the script on page load:

$(document).ready(function(){
  $('#mydiv').show();
});
mrzasa
  • 22,895
  • 11
  • 56
  • 94
  • Thanks, I just tried both of these and neither of them seemed to work. this is why I'm wondering if Jquery is actually working...? – Tomas Oct 11 '19 at 21:54
  • Have you added it in the `application.js` and `Gemfile`? – mrzasa Oct 11 '19 at 22:01
  • my understanding is that you don't need to do this in rails 6 as it comes pre packaged with webpacker... but I might be wrong... It does seem to be in Package.json and Application.js – Tomas Oct 11 '19 at 22:10
  • The load order is important. The test by @mrzasa is the proper order. If you need to, you should also include a test for `document.load` and/or `document.ready`. Personally, I have small badges that are permanently affixed to my layout during development that tests on each page if certain environmental aspects are loaded or not. jQuery, if I'm using it, is one. I have also tested for Stimulus, `application.css`, etc. That way it is easy to tell if something isn't rendering right whether or not all my dependencies are present. – Matteo Aug 25 '22 at 15:46