Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Fixing a previously functioning jQuery Slider Question

In a response to past request  Zachary used  the jQuery UI slider tool to create a question in which one could drag a button to determine an allocation between 2 factors.

It also displayed the values associated with the slider position

https://sawtoothsoftware.com/forum/11558/semantic-differential-display-values-handles-on-one-slider

After upgrading to 9.4.0 this displaying of the 2 values  no longer works.

Would be grateful for a fix

thanks
Dan
asked Sep 4 by dan r Bronze (1,550 points)
retagged Sep 4 by Walter Williams
I'm not able to observe the problem.  Can you open your browser's console (F12) and see if any errors appear when you using the question?
Hello Zachary

Rather embarrassingly  I posted the incorrect Q that we are implementing.
Let me correct that, the approach  we implemented was shown here:

https://sawtoothsoftware.com/forum/12720/allocation-format-slider-semantic-differential-question

in which you suggested add this to the footer of the Slider Q:

Specialism: <span id="specialismSpan"></span>
Location: <span id="locationSpan"></span>
 
<script>
$(window).load(function(){
    $('#[% QuestionName() %]_div .ui-slider').on('slide', function(event, ui){
        var resp = ui.value;
        $('#specialismSpan').text(resp);
        $('#locationSpan').text(100 - resp);
    });
})
</script>



That worked, see:
https://ssiweb.humanities.manchester.ac.uk/slideralloc

But now when opened, renamed and saved in 9.4
https://ssiweb.humanities.manchester.ac.uk/slideralloc2error

there is an error of the form:

Uncaught TypeError: a.indexOf is not a function
    at r.fn.init.r.fn.load (jquery-3.2.1.min.js:4)
    at ciwweb.pl?hid_studyname=slideralloc2error&hid_pagenum=0&hid_link=1&hid_javascript=1&hid_screenwidth=1920:89
Replace:

$(window).load(function(){


with:

$(window).on('load', function(){
perfect, thank you.
D

1 Answer

0 votes
Try using this code instead in the semantic diff:

Specialism: <span id="specialismSpan"></span>
Location: <span id="locationSpan"></span>

<script>
function SSI_SliderSetup(strQName, intScaleMin, intScaleMax, blnListItemsAsValues, blnUseAltValues, ItemValuesArray, blnShowToolTip, PreviousAnswers, strHandlePosition, intCustomValuePos, blnHasItemsFlipped)
{
    var OriginalAnchorPoints = [];
    var FlippedAnchorPoints = [];
    var FlippedItemValuesArray = [];
    var i = 0;
    var j = 0;

    if (blnListItemsAsValues)
    {
        OriginalAnchorPoints = SSI_FindAnchorSliderPoints(strQName, ItemValuesArray);
        intScaleMin = 1;
        intScaleMax = 1000;
        if (blnHasItemsFlipped)
        {
            var FlippedItemArray = ItemValuesArray.slice(0); //Copy array
            FlippedItemArray.reverse();
            FlippedAnchorPoints = SSI_FindAnchorSliderPoints(strQName, FlippedItemArray);
        }
    }
    else if (blnUseAltValues)
    {
        if (blnHasItemsFlipped)
        {
            FlippedItemValuesArray = ItemValuesArray.slice(0); //Copy array
            FlippedItemValuesArray.reverse();
        }
    }
    var CurrentAnswers = [];
    //This is to handle a case where they answer and then click refresh on the browser
    jQuery("#" + strQName + "_div .slider_container").each(function ()
    {
        var SliderControl = jQuery(this).find(".slider_control");
        var SliderInputObj = jQuery(this).find("input");
        var intValue = SliderInputObj.val();
        if (intValue !== "")
        {
            var intID = this.id.replace(strQName + "_", "");
            CurrentAnswers.push([intID, intValue]);
        }
    });
    if (CurrentAnswers.length)
    {
        PreviousAnswers = CurrentAnswers;
    }
    jQuery("#" + strQName + "_div .slider_container").each(function ()
    {
        var SliderControl = jQuery(this).find(".slider_control");
        var SliderInputObj = jQuery(this).find("input");
        var SliderToolTip = 0;
        var blnFlipScale = false;
        var AnchorPoints = [];
        var AltValuesArray = [];
        if (SliderControl.hasClass("flip_scale"))
        {
            blnFlipScale = true;
        }
        if (blnListItemsAsValues)
        {
            if (blnFlipScale)
            {
                AnchorPoints = FlippedAnchorPoints;
            }
            else
            {
                AnchorPoints = OriginalAnchorPoints;
            }
        }
        else if (blnUseAltValues)
        {
            if (blnFlipScale)
            {
                AltValuesArray = FlippedItemValuesArray;
            }
            else
            {
                AltValuesArray = ItemValuesArray;
            }
        }
        if (blnShowToolTip)
        {
            jQuery(this).find(".slider_tool_tip");
            SliderToolTip.hide();
        }
        SliderControl.slider({
            min: intScaleMin,
            max: intScaleMax,
            start: function (e, ui)
            {
                if (blnShowToolTip)
                {
                    SliderToolTip.fadeIn('fast');
                }
            },
            change: function (e, ui)
            {
                if (blnShowToolTip)
                {
                    SSI_ShowSliderToolTip(ui, SliderToolTip);
                }
            },
            slide: function (e, ui)
            {
                jQuery(this).addClass("touched");
                if (blnShowToolTip)
                {
                    SSI_ShowSliderToolTip(ui, SliderToolTip);
                }
                var resp = ui.value;
                $('#specialismSpan').text(resp);
                $('#locationSpan').text(100 - resp);
            },
            stop: function (e, ui)
            {
                var intValue = 0;
                var intPosValue = 0;
                if (blnListItemsAsValues)
                {
                    var ResultArray = 0;
                    if (blnFlipScale)
                    {
                        var ReversedScale = AnchorPoints;
                        ReversedScale.reverse();
                        ResultArray = SSI_FindSliderListValue(ui.value, ReversedScale, intScaleMax, ui);
                    }
                    else
                    {
                        ResultArray = SSI_FindSliderListValue(ui.value, AnchorPoints, intScaleMax, ui);
                    }
                    intValue = ResultArray[0];
                    intPosValue = ResultArray[1];
                }
                else if (blnUseAltValues)
                {
                    intValue = AltValuesArray[ui.value - 1];
                    intPosValue = ui.value;
                }
                else
                {
                    if (blnFlipScale)
                    {
                        intValue = SSI_FlipNumericScale(ui.value, intScaleMin, intScaleMax);
                    }
                    else
                    {
                        intValue = ui.value;
                    }
                    intPosValue = ui.value;
                }
                SSI_SetSliderValue(jQuery(this), SliderInputObj, intValue, intPosValue, strHandlePosition);
                jQuery(this).addClass("touched");
            }
        });


(cont.)
answered Sep 6 by Zachary Platinum Sawtooth Software, Inc. (63,900 points)
(cont. from above)

        // To get left do nothing
        var sliderStartVal = 0;
        if (strHandlePosition == "center")
        {
            jQuery(this).find(".ui-slider-handle").css("left", "50%");
            jQuery(this).find('.slider_control').slider('value', intScaleMax / 2);
        }
        else if (strHandlePosition == "right")
        {
            jQuery(this).find(".ui-slider-handle").css("left", "100%");
            jQuery(this).find('.slider_control').slider('value', intScaleMax);
        }
        else if (strHandlePosition == "custom")
        {
            //Set the original value positions not the random ones.
            var intActualPos = intCustomValuePos;
            if (blnListItemsAsValues)
            {
                intActualPos = SSI_FindSliderPosition(intCustomValuePos, OriginalAnchorPoints, intScaleMax, this);
            }
            else if (blnUseAltValues)
            {
                for (j = 0; j < ItemValuesArray.length; j++)
                {
                    if (intCustomValuePos == ItemValuesArray[j])
                    {
                        intActualPos = j + 1;
                        break;
                    }
                }
            }
            SSI_SetSliderPosition(jQuery(this).find(".slider_control"), intActualPos);
        }
        else if (strHandlePosition == "invisible")
        {
            var SliderHandle = jQuery(this).find(".ui-slider-handle");
            jQuery(this).find('slider_control').slider('value', 0);
            SliderHandle.hide();
        }
        //Restore previous answers
        if (PreviousAnswers.length)
        {
            var intID = this.id.replace(strQName + "_", "");
            var intValue = 0;
            var intPosValue = 0;
            for (i = 0; i < PreviousAnswers.length; i++)
            {
                if (PreviousAnswers[i][0] == intID)
                {
                    intValue = PreviousAnswers[i][1];
                    intPosValue = 0;
                    if (blnListItemsAsValues)
                    {
                        intPosValue = SSI_FindSliderPosition(intValue, AnchorPoints, intScaleMax, this);
                    }
                    else if (blnUseAltValues)
                    {
                        for (j = 0; j < AltValuesArray.length; j++)
                        {
                            if (intValue == AltValuesArray[j])
                            {
                                intPosValue = j + 1;
                                break;
                            }
                        }
                    }
                    else
                    {
                        if (blnFlipScale)
                        {
                            intPosValue = SSI_FlipNumericScale(intValue, intScaleMin, intScaleMax);
                        }
                        else
                        {
                            intPosValue = intValue;
                        }
                    }
                    SSI_SetSliderValue(jQuery(this).find(".slider_control"), SliderInputObj, intValue, intPosValue, strHandlePosition);
                    break;
                }
            }
        }
    });
}
</script>
Thanks Zachary, that works perfectly
Dan

For anyone following, the previous fix of replacing
$(window).load(function(){
with:
$(window).on('load', function(){

didn't work for some browser versions
To clarify, users should still make that change to any code they are using going into Lighthouse Studio 9.4.  This particular issue arose due to a change in behavior of jQuery's document.ready event.  There's no longer a guarantee that the document.ready event will have finished before the window.load event, causing Chrome to get a bit ahead of itself in this situation.
...