Why am I not able to set a slider value using JQuery and AJAX from a C# class?

Question

I am trying to set the value for a slider on a webpage using JQuery and AJAX to values stored in a class. Here is the striped down controller action:

    public ActionResult GetSliderValues()
    {
        try
        {
            PredictiveModlePerformanceSettings settings_class = new PredictiveModlePerformanceSettings();
            settings_class.max_degredation = 100;
            return Json(settings_class, JsonRequestBehavior.AllowGet);
        }
        catch (Exception)
        {
            throw;
        }
    }

This is the JQuery:

    $("#maxDegradationSlider").slider({
    range: "min",
    value: function getSliderSettings() {
        $ajax({
            url: '/PredictiveSystem/GetSliderValues',
            type: "GET",
            cache: false,
            success: function (settings_class) {
                $('#resinLifeExpectancySlider').val(settings_class.max_degredation);
            }
        });
    },
    min: 0,
    max: 100,
    step: .25,
    slide: function (event, ui) {
        $("#maxDegradation").text(ui.value + "%");
    }
});
$("#maxDegradation").text($("#maxDegradationSlider").slider("value") + "%");

Finally, here is the C# class:

    public class PredictiveModlePerformanceSettings
{
    public double resin_life_expectancy { get; set; }
    public double resin_age { get; set; }
    public bool dont_replace_resin { get; set; }
    public double regen_effectiveness { get; set; }
    public double max_degredation { get; set; }
    public double cleaning_efffectiveness { get; set; }
    public double threshold_cleaning { get; set; }
    public double threshold_replacement { get; set; }
    public double source_predictability { get; set; }
    public int number_of_iterations { get; set; }
    public int std_deviation_interval { get; set; }
}

I think my mistake is in the value: portion of the code. I don't think that is where my function should go to set the value.

This is the result I am getting:

score 1 · Accepted Answer · answered Sep 17 '15 at 20:28

You seem to be using differing IDs. That's the little problem. The big problem is that "value" expects a number (maybe it would also take a function that returns a number), but you are assigning a function that sets the value to it. I'd recommend inverting your code as follows:

$.ajax({
    url: '/PredictiveSystem/GetSliderValues',
    type: "GET",
    cache: false,
    success: function (settings_class) {
        $("#maxDegradationSlider").slider({
            range: "min",
            value: settings_class.max_degredation,
            min: 0,
            max: 100,
            step: .25,
            slide: function (event, ui) {
               $("#maxDegradation").text(ui.value + "%");
            }
         });
         $("#maxDegradation").text($("#maxDegradationSlider").slider("value") + "%");
    }
 });

This approach first retrieves the server's slider value, then creates the slider with the appropriate value.

EDIT: I also moved the setting of the text inside the success callback to ensure that it happens after the slider has been created and the value set.

This is exactly what I was thinking the issue was. I am just starting out with JS and so this is new to me. I was trying weird things like putting the `function (settings_class) {....}` function outside the `$.ajax` and passing in the number but that obviously didn't work. I didn't think about inverting the "nesting", so to speak, all together. Thank you!! — Hooplator15, Sep 17 '15 at 20:34

score 0 · Answer 2 · edited May 23 '17 at 10:27

0

I think you need to parse your json response first. Parse JSON in JavaScript?

        success: function (settings_class) {
            var settings = JSON.parse(settings_class);
            $('#resinLifeExpectancySlider').val(settings.max_degredation);
        }

edited May 23 '17 at 10:27

Community

1
1

answered Sep 17 '15 at 20:17

Joshua

542
1
4
17

I just noticed that I am setting `$('#resinLifeExpectancySlider')` where what I really want is to set the value of the same slider, aka, `$("#maxDegradationSlider")`. I'm not sure if that is going to change anything here in terms of methodology (other than changing the #tag). I'll give your suggestion a try. – Hooplator15 Sep 17 '15 at 20:25
This should not help, since jQuery should already have detected that the response was JSON and parsed it for you. – devinallenaz Sep 17 '15 at 20:28

Why am I not able to set a slider value using JQuery and AJAX from a C# class?

2 Answers2