在初始化尝试调用方法'value'之前无法在滑块上调用方法

时间:2013-06-25 00:58:00

标签: jquery asp.net jquery-ui jquery-ui-slider

我使用以下代码作为滑块

Css和Jquery:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

ASPX:

<p>
   <label for="amount">Value:</label> 
   <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />%
</p> 
<div id="slider-vertical" style="height: 15px; width:800px"></div>
<script type="text/javascript">
    $(function () {
        $("#slider-vertical").slider({
            orientation: "horizantal", range: "min", min: 0, max: 100, value: 60,
            slide: function (event, ui)
            { $("#amount").val(ui.value); }
        });
        $("#amount").val($("#slider-vertical").slider("value"));
    });
</script>

我正在尝试设置滑块的值:

function UpdateSlider(PhaseInStatusReportVal) {
    $("#slider-vertical").slider("value").val(PhaseInStatusReportVal);
}

我在上面的代码中调用代码:

ClientScript.RegisterStartupScript(Me.GetType(), "updatetheslider", "UpdateSlider('" + BCOMSPackageValidationList(0).PhaseInStatusReport.ToString() + "')", True)

但它引发了上述错误。

有人可以帮助我吗?

6 个答案:

答案 0 :(得分:7)

您是否考虑过其他方法。使用初始值设置隐藏字段 - &gt;从代码隐藏中填充值,然后执行以下操作:

$(function () {
    $("#slider-vertical").slider({
        value: $("#hiddenFieldWhatever").val(),
        // setup the rest ...
    });  
});

我希望我理解你的要求是正确的。

答案 1 :(得分:5)

desimplify('C3H8O3')
'CCCHHHHHHHHOOO'

答案 2 :(得分:0)

要设置滑块的值,您需要使用value method

$("#slider-vertical").slider("value", PhaseInStatusReportVal);

演示:Fiddle

答案 3 :(得分:0)

我发现,如果您使用滑块库中ON函数中的事件,则可以获取该值。例如:

slider.on('slideStop', function(ev) {
    let value= ev.value; //try ev if you want to see all
    console.log(value);
})

致谢

答案 4 :(得分:0)

没有答案可以说明问题。问题在于,您正在尝试在文档加载之前在DOM元素上创建事件侦听器:

如果应该在页面加载后立即运行代码块,则可以将其包装在函数中以在文档加载后立即运行:

document.onload=function(){
// Your Code Here
}

如果代码块在一个函数中动态运行,则只需将代码包装在检查中以确保文档已加载:

if (document. readyState === 'complete') {
//Your Code Here
}

答案 5 :(得分:-1)

所以我经常看到这种类型的东西。您可以执行以下操作之一(AFAIK):

var slider;

$(function () { 
    var slider = $("#slider-vertical").slider({ 
        orientation: "horizantal",
        range: "min",
        min: 0,
        max: 100,
        value: 60, 
        slide: function (event, ui) { 
            $("#amount").val(ui.value); 
        } 
    }); 

    $("#amount").val(slider.slider("value")); 
});

function UpdateSlider(PhaseInStatusReportVal) {
    slider.slider("value").val(PhaseInStatusReportVal);
}

$("#slider-vertical").slider().slider("value").val(PhaseInStatusReportVal);

我更喜欢第一种选择。