Using jQuery inside SSI Web

Since I'm still using SSI Web 7.0.26, I don't have jQuery natively working. I have some code using jQuery that I want to port to SSI Web 7.0.26. I've already saw this thread concerning the use of jQuery: https://www.sawtoothsoftware.com/forum/133/web-service-call-using-ajax#a144

So, even after importing jQuery and jQuery UI, putting $.noConflict(); in the beginning of my script and replacing all the "$" by "jQuery", it still doesn't work. What must I be doing worng / missing? (I will post the code later)

asked Apr 18, 2012 by João Fernandes Bronze (2,040 points)

Code goes below. In Aptana Studio is working as expected, just trying to port it to SSI Web.

<html>
    <head>
        <link type="text/css" href="jquery/css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="Stylesheet" />    
        <script type="text/javascript" src="jquery/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jquery/js/jquery-ui-1.8.19.custom.min.js"></script>
        
        <script>
            $(function()
            {
                $( "#slider" ).slider(
                {
                    range: "min",
                    value: 30,
                    min: 1,
                    max: 60,
                    slide: function(event, ui)
                    {
                          $( "#amount" ).val( "$" + ui.value );
                      }
                });
                $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
            });
        </script>
    </head>
    <body>
        <div class="demo">
            <p>
                <label for="amount">Maximum price:</label>
                <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
            </p>

            <div id="slider"></div>
        
        </div><!-- End demo -->
    </body>
</html>

Changing to SSI WEb 7.0.26, in the "Survey Settings"button -> "Headers and Footers" tab -> "HTML <head> Tag" box I changed the contents to:

<link type="text/css" rel="StyleSheet" href="[%GraphicsPath()%]bluecurve.css" />


<link type="text/css" href="/jquery/css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="Stylesheet" />    
<script type="text/javascript" src="/jquery/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/jquery/js/jquery-ui-1.8.19.custom.min.js"></script>

In the "Free Format Question" box -> "Variables / Question HTML" tab -> "HTML" box, I put:

<div class="demo">
    <p>
        <label for="amount">Maximum price:</label>
        <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>

    <div id="slider"></div>
        
</div><!-- End demo -->


<script>
    $.noConflict();

    jQuery(function()
    {
        jQuery( "#slider" ).slider(
        {
            range: "min",
            value: 30,
            min: 1,
            max: 60,
            slide: function(event, ui)
            {
                      jQuery( "#amount" ).val( "jQuery" + ui.value );
                  }
        });
        jQuery( "#amount" ).val( "jQuery" + jQuery( "#slider" ).slider( "value" ) );
    });
</script>

I also have a hidden variable that I'm not using right now, since I just want the slider to be displayed in Chrome.

Any improvement will be posted here. Thanks, and if someone knows something I don't, please let me know.

João

commented Apr 19, 2012 by João Fernandes Bronze (2,040 points)

1 Answer

Best answer

Try the following steps:

1) Download the whole jQuery UI package from http://jqueryui.com/download
2) Unzip the package and copy the JS and CSS folder to your survey inside the folder /graphics/system/ .
3) Open the Survey Settings of your survey and go to 'Headers and Footers'.
4) Inside the 'HTML <head> Tag' box, copy and paste the following lines:

<link rel="stylesheet" type="text/css" href="[%GraphicsPath()%]system/css/ui-lightness/jquery-ui-1.8.19.custom.css">
<script type="text/javascript" src="[%GraphicsPath()%]system/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="[%GraphicsPath()%]system/js/jquery-ui-1.8.18.custom.min.js"></script>

<script type="text/javascript">
var j = jQuery.noConflict();
</script>

5) Click on OK and create a new Free Format question
6) Go the 'Question Text' tab and add the following lines to the 'Header 1' field:

<h3>jQuery Slider Example</h3>

<div id="slider"></div>

<script type="text/javascript">
j(document).ready(function(){
  j("#slider").slider();
});
</script>

7) Test and see if it works ;)

At this point, I think you can manage.

answered Apr 23, 2012 by anonymous

I've just managed to put the jQuery running, just before seeing your answer! I was missing the "[%GraphicsPath()%]" thing. Basically I think your steps are right, although I didn't need to use the "noConflict()" method (for now, of course).

The code goes like this:

"Survey Settings"button -> "Headers and Footers" tab -> "HTML <head> Tag" box

<link type="text/css" href="[%GraphicsPath()%]/jquery/css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="Stylesheet" />    
<script type="text/javascript" src="[%GraphicsPath()%]/jquery/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="[%GraphicsPath()%]/jquery/js/jquery-ui-1.8.19.custom.min.js"></script>

<script>
    $(function()
    {
        $( "#slider" ).slider(
        {
            range: "min",
            value: 30,
            min: 1,
            max: 60,
            slide: function(event, ui)
            {
                      $( "#amount" ).val( "$" + ui.value );
                  }
        });
        $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
    });
</script>

"Free Format Question" box -> "Variables / Question HTML" tab -> "HTML" box:

<div class="demo">
    <p>
        <label for="amount">Maximum price:</label>
        <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>

    <div id="slider"></div>
</div><!-- End demo -->

commented Apr 23, 2012 by João Fernandes Bronze (2,040 points)
edited Apr 23, 2012 by João Fernandes

Keep in mind that this part of your script :

<script>
    $(function()
    {
        $( "#slider" ).slider(
        {
            range: "min",
            value: 30,
            min: 1,
            max: 60,
            slide: function(event, ui)
            {
                      $( "#amount" ).val( "$" + ui.value );
                  }
        });
        $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
    });
</script>

is now loaded on every question of your survey.
This can be useful when every question has a slider with the same settings, but it's a good practice to only load javascript when it's really necessary.
Of course, in this example it wouldn't decrease any performance, but in larger projects it can be useful.

commented Apr 23, 2012 by JoeriSkim (400 points)

Yes Joeri, I'm aware of that. Given the fact that half of the questions in my questionnaire use this code, it could make sense of include it in the <head> section. But now I'm having trouble in the second part of the questionnaire: I'm getting errors in the questions that don't use this code: "Uncaught TypeError: Object [object Object] has no method 'addEvent'". So, even if I want to put it in the <head> section of the page, unless there is a method to outline it, I can't, and I'll have to put it in the <body> of every question :]

commented Apr 24, 2012 by João Fernandes Bronze (2,040 points)

I'm having a silly doubt: since I'm somewhat new to JavaScript and specially jQuery, I can't seem to store the slider's last value in the dataset. Undoubtedly, the problem is in the "value" attribute of the hidden variable (PerguntaVAS1_v1):

<p>
    <label for="amount">Valor actual:</label>
    <input type="text" id="amount" name="amount" style="border:0; color:#f6931f; font-weight:bold;" />
    <input name="PerguntaVAS1_v1" id="PerguntaVAS1_v1" type="hidden" value=amount>
</p>

I've tried *everything*, from "value" to "value.val", value.val, etc, and I can't seem to find the solution. Due to my lack of knowledge on HTML / JavaScript / jQuery, could please someone give me a hint?

Thanks,
João

commented Apr 24, 2012 by João Fernandes Bronze (2,040 points)

Hi João,

You are trying to use a javascript variable ('amount') inside an input element, but that is not necessary.
Just leave the value empty (or make it a default value when the page is loaded).

When defining the options of the slider, you can use different kinds of events to change the value of the hidden input field.
I've made an example that change the value of a hidden input field when the respondent stops using the slider:

<div id="slider"></div>

<input type="hidden" name="somevalue" id="hidden_somevalue" value="">

<script type="text/javascript">
$(document).ready(function(){
  $("#slider").slider({
    stop: function(event, ui) {
      $("#hidden_somevalue").val(ui.value);
    }
  });
});
</script>

But it's also possible to update the value immediately by using the 'slide' event. See http://jqueryui.com/demos/slider/#events for the different events.

commented Apr 24, 2012 by JoeriSkim (400 points)

Thanks Joeri, it works now like a charm! :] I've also tried to incorporate this code into the one I have on the header, but with no success. Thanks!

commented Apr 24, 2012 by João Fernandes Bronze (2,040 points)
edited Apr 26, 2012 by João Fernandes

Most popular tags

Have an idea?

Using jQuery inside SSI Web

Your comment on this question:

Your solution to the original question

1 Answer

Your comment on this answer: