cannot call methods on slider prior to initialization attempt to call method 'value'
Solution 1
Have you considered a different approach. Setup a hidden field with the initial value -> populate the value from the code-behind, then do something like:
$(function () {
$("#slider-vertical").slider({
value: $("#hiddenFieldWhatever").val(),
// setup the rest ...
});
});
I hope I understood your requirements correct.
Solution 2
var slider = $("#slider-vertical");
var a = function() {
if(slider.slider("instance")) {
slider.slider('value', 1);
console.log('set value');
} else {
console.log('ERROR: cannot set value prior to initialization');
}
}
var b = function() {
slider.slider();
console.log('initialized');
}
a();
b();
a();
Solution 3
No answers explain the issue. The problem is that you're trying to create an event listener on a DOM element before the document is loaded:
If your chunk of code is supposed to run as soon as the page is loaded you can wrap it in a function to run as soon as the document loads:
document.onload=function(){
// Your Code Here
}
If the chunk of code runs dynamically inside a function you can simply wrap your code inside a check to make sure the document is loaded:
if (document. readyState === 'complete') {
//Your Code Here
}
Related videos on Youtube
Kapil
Updated on July 11, 2022Comments
-
Kapil almost 2 years
I am using the following code for slider
Css and 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>
I am trying to set the value for slider:
function UpdateSlider(PhaseInStatusReportVal) { $("#slider-vertical").slider("value").val(PhaseInStatusReportVal); }
I am calling above code from something like this :
ClientScript.RegisterStartupScript(Me.GetType(), "updatetheslider", "UpdateSlider('" + BCOMSPackageValidationList(0).PhaseInStatusReport.ToString() + "')", True)
but it's throwing the above error.
Can anyone please help me?
-
tymeJV almost 11 years
$("#slider-vertical").slider("values", PhaseInStatusReportVal);
? -
Kapil almost 11 yearsI tried it's throwing Error: cannot call methods on slider prior to initialization; attempted to call method 'values'
-
coding_idiot almost 8 yearsdid you find the root-cause ?
-
-
devlife almost 11 yearsAre you getting the same exception with both options?
-
T J almost 8 years
.slider("value")
returns the value, not a jQuery object. You can't invoke.val()
on that -
coding_idiot almost 8 yearsI have hard-coded the value, but it still throws the same error.
-
Grengas almost 4 yearsYep, this is the only option that worked for me to check if slider has been initialized on element: $(element).slider("instance")