How do you use JQuery and JQuery UI in SSI 6.6.18

Question

I'm running SSI 6.6.18 (no budget to upgrade) and I've tried the examples on the site where SSI 7 was being used and I just can't seem to get JQuery Sliders to work correctly.

Answer 1

Download the compressed, production jQuery file jquery-3.2.1.min.js here:

https://jquery.com/download/

Download and unzip jquery-ui-1.12.1.zip here:

https://jqueryui.com/

Place both the jQuery file and the unzipped jQuery UI folder in your study's graphics directory.  Finally, reference both items from your survey's HTML head tag like this:

<script src="[% GraphicsPath() %]jquery-3.2.1.min.js"></script>
<script src="[% GraphicsPath() %]jquery-ui-1.12.1\jquery-ui.min.js"></script>

Comments

See next comment by me...

The above doesn't work in test mode (I've not yet tried a live implementation). I can make Jquery work when I use an external link to the jQuery archive.

However, when I run it on localhost, Sawtooth refuses to find the files.

I've even done hard links to test to make sure I'm getting to the graphics path and I can get an image to show up but jQuery simply doesn't work.

This is the code:
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
<script src="[% GraphicsPath() %]jquery-3.2.1.min.js"></script>
<script src="[% GraphicsPath() %]jquery-ui-1.12.1\jquery-ui.min.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>

It doesn't work but an image src'ed as follows does:

<img src="/tst4/graphics/male stick figure.png" alt="" border="0">

WHen I code the script sourse as above in the image, it still doesn't work.

---

Additional note: You cannot test jQuery in 6.6 without loading to a live site. The localhost refuses to read the files. You can use external links to test your code however. So if you want to test on your PC before loading, you need to use the links.