Link to home
Start Free TrialLog in
Avatar of Starr Duskk
Starr DuskkFlag for United States of America

asked on

NoUISlider retrieving and populating values from code behind

I am using a NoUISlider in asp.net and want to know how to retrieve the values for the slider. It is a multi-slider, so needs to return the left and right sides.
User generated image
From what I've determined by reading, I will attach a javascript method to the save button.
btnSave.Attributes.Add("onClick", "SaveSlider();return true;")

Open in new window


Then the javascript will store the values to two hidden elements and I'll use those server side.

Code would look something like this:

    function SaveSlider() {

        var slider = document.getElementById('slider-tooltips');
        var values = slider.noUiSlider.get();

      //  var values = $('#exampleSlider0').noUiSlider('value');

        document.getElementById("hdnSlider1").value = values(0);
        document.getElementById("hdnSlider2").value = values(1);
    }

Open in new window


I read that it retrieves the values as an array.

How do I retrieve and store the values to the hidden fields?

Also, any suggestions for populating the values on page load with existing values?

Anyone have an existing method?

thanks!
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Starr Duskk

ASKER

It appears something in there is wrong. I added the code to the top of my update function and put an alert after the line and it never gets hit. So looking at the console, I get these errors;

Uncaught TypeError: Cannot set property 'value' of null
    at Object.<anonymous> (TeamSearch.aspx:3336)
    at nouislider.min.js?v=19.12.09a:2
    at Array.forEach (<anonymous>)
    at nouislider.min.js?v=19.12.09a:2
    at Array.forEach (<anonymous>)
    at J (nouislider.min.js?v=19.12.09a:2)
    at nouislider.min.js?v=19.12.09a:2
    at Array.forEach (<anonymous>)
    at Object.$ [as on] (nouislider.min.js?v=19.12.09a:2)

Open in new window


My code looks like this:
    slider.noUiSlider.on('update', function (values, handle) {
       
        document.getElementById("hdnSlider" + (handle * 1 + 1)).value = values[handle]; // add this new line of code

Open in new window

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
It says hdnSlider1 on page load.

I found the problem after tracking down that even the retrieval of the hidden field value was erroring in an alert.

I had to set the hidden field as static:

<asp:HiddenField ID="hdnSlider2" ClientIDMode="Static" runat="server" />

Open in new window


Not the js at all.

Thanks so much and sorry!
Thanks so much!
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial