Develop Reference

Wait until jquery plugin on another plugin init

i'm using iziModal jquery plugin and ion range slider. Basically I have a table with records and each record has edit button that shows an iziModal with sliders inside it.
I have in a js file called "slidersInit.js" ion range sliders plugin initialization
$(document).ready(function () {
$("#NumTurnos").ionRangeSlider({
skin: "big",
type: "single",
min: 1,
max: 3,
from: 3
});
$("#NumPAB").ionRangeSlider({
skin: "big",
type: "single",
min: 0,
max: 50,
from: 6
});
$("#AlcanceAbastecimento").ionRangeSlider({
skin: "big",
type: "single",
min: 0,
max: 20,
from: 3
});
$("#QtdMin").ionRangeSlider({
skin: "big",
type: "single",
min: 0,
max: 20,
from: 4
});
$("#QtdMax").ionRangeSlider({
skin: "big",
type: "single",
min: 0,
max: 50,
from: 12
});
$("#NumDias").ionRangeSlider({
skin: "big",
type: "single",
min: 0,
max: 5,
from: 5
});
})
Now on my actual page I call the script
<script src="~/lib/vue/vue.js"></script>
<script src="~/lib/axios/axios.js"></script>
<script src="~/lib/ion-rangeslider/js/ion.rangeSlider.js"></script>
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="~/lib/font-awesome/js/all.js"></script>
<script src="~/lib/izimodal/js/iziModal.js"></script>
<script src="~/js/slidersInit.js"></script>
notice that it's at bottom before ion rangeslider and izimodal.
So on that page I also have iziModal configurations
$(document).ready(function () {
$("#modal").iziModal({
zindex: 3000,
width: 900,
onOpening: function (modal) {
modal.startLoading();
//ajax call
//update ion range sliders with new values
}
});
});
problem is for some reason when i open the iziModal, all sliders appear at 0 which means they haven't been initialized before iziModal opens and it only works if I initialize them inside the Modal open function.
Problem is that i want to do this outside iziModal because it won't work if i call the sliders initialize everytime i click on a record edit button to call modal, it keeps previous values and won't update.
So is there a way where i can just wait for sliders to be initialized before modal is?

Nevermind, it seems the issue was something else. I tried everything, destory modal, sliders and reinitialize. It seems what worked was resetting iziModal on closing.
I just added this method to iziModal initialize
onClosed: function (modal) {
$('#modal').iziModal('resetContent');
}
I hope someone with same problem sees this to save some headaches...

jquery UI slider, change event show *too much recursion*

$( "#slider-1" ).slider({
min: 1,
step: 0.01,
max: 3,
value: 2,
animate:"slow",
orientation: "horizontal",
change: function (event, ui) {
$(this).slider('value', Math.round(ui.value));
ui.preventDefault();
}
})
This show too much recursion error in console how fix it.
thanks in advance.

I fixed that issue myself, by changing the code as below.
var rounded_value='';
$( "#slider-1" ).slider({
min: 1,
step: 0.01,
max: 3,
value: 2,
animate:"slow",
orientation: "horizontal",
change: function (event, ui) {
if(rounded_value!=ui.value){
rounded_value=ui.value;
$(this).slider('value', Math.round(ui.value));
}
return false;
}
})

JQuery UI Slider resume after stopping on condition using return false

This is the slider element with the call. I was trying to stop it on condition which was successful but after that it's stuck. I tried to add else{ return true; } but then as expected it doesn't run the rest. If I move the if else block at end the codes run then condition fires which is not what I desire.
$(".hdrHt").slider({
orientation: "horizontal",
range: "min",
max: 22,
min: 8,
value: 15,
create: function(){ $(this).find('.headHandle').text( $(this).slider("value")+'%'); },
slide: function(e,ui){
var hfs=currentVid.find('.ovlDivs').css('font-size').replace('px',''),hht=currentVid.find('.headerDiv').css('height').replace('px','');
if((parseInt(hfs)+10)>parseInt(hht)){ return false; }
currentVid.find('.middleDiv').css('height',(100-parseInt(currentVid.find('.ftrHt').slider("value"))-ui.value)+'%');
currentVid.find('.headerDiv').css('height',ui.value+'%'); $(this).find('.headHandle').text(ui.value+'%');
}
});

Ok I gave up too quickly it was easy.. But still if you have a cleaner solution please go ahead.
var stopPt=8;
$(".hdrHt").slider({
orientation: "horizontal",
range: "min",
max: 22,
min: 8,
value: 15,
create: function(){ $(this).find('.headHandle').text( $(this).slider("value")+'%'); },
slide: function(e,ui){
if(ui.value>stopPt){
currentVid.find('.middleDiv').css('height',(100-parseInt(currentVid.find('.ftrHt').slider("value"))-ui.value)+'%');
currentVid.find('.headerDiv').css('height',ui.value+'%'); $(this).find('.headHandle').text(ui.value+'%');
}
var hfs=currentVid.find('.ovlDivs').css('font-size').replace('px',''),hht=currentVid.find('.headerDiv').css('height').replace('px','');
if((parseInt(hfs)+15)>parseInt(hht)){ stopPt=ui.value; return false; }
}
});

Loading Value of Input into Slider Options

I need the variable "value" in my slider plugin to be the integer value of a input in the form:
$(function () {
$("#calcSlider").slider({
min: 0,
max: 90,
step: 5,
value: /* ACCESS HERE!!!!!! */,
slide: function (event, ui) {
$("#calcSup").val(ui.value);
}
});
});
I need value: to be the value in calcSup or ${form.calcSup}, but that is a string. I need it parsed to a int:
<input type="text"
id="calcSup"
name="calcSup"
value="${form.calcSup}"
size="3"
readonly="readonly" />

Maybe you are looking for the parseInt function, more details can be found here:
http://www.w3schools.com/jsref/jsref_parseint.asp
$(function () {
$("#calcSlider").slider({ min: 0,
max: 90,
step: 5,
value: parseInt($('input#calcSup').val()),
slide: function (event, ui) {
$("#calcSup").val(ui.value);
}
});
});
<input type="text" id="calcSup" name="calcSup" value="${form.calcSup}" size="3" readonly="readonly"/>

If you're going to parse the value to an integer, don't forget to include the radix so it doesn't wind up getting confused for base-8 or something.
$("#mySlider").slider({
// Set initial value to that of <input type="text" id="bar" value="23" />
value: parseInt( $("#bar").val(), 10 ),
// Update <input type="text" id="foo" /> anytime we slide
slide: function ( event, ui ) {
$("#foo").val(ui.value);
}
});
Demo: http://jsbin.com/oceqab/edit#javascript,html

This might be what you are looking for:
$(function () {
$("#calcSlider").slider({ min: 0,
max: 90,
step: 5,
value: parseInt($("#calcSup").val()),
slide: function (event, ui) {
$("#calcSup").val(ui.value);
}
});
});

How to convert anonymous function to a regular one?

Total JS noob here. I have the following line that implements the jQuery Slider:
<script type="text/javascript">
$(document).ready(function () {
$("#wheelLeft").slider({
orientation: 'vertical', value: 37,
min: -100, max: 100,
slide: function (event, ui) { $("#lblInfo").text("left"); } });
});
</script>
Basically on the slide event, the #lblInfo gets its text set to left. This works fine. However, I'd like to convert the inline anonymous function that handles the slide event into a regular function.
Can someone help out?

<script type="text/javascript">
function handleSlide(event, ui) {
$("#lblInfo").text("left");
}
$(document).ready(function () {
$("#wheelLeft").slider({
orientation: 'vertical', value: 37,
min: -100, max: 100,
slide: handleSlide
});
});
</script>

<script type="text/javascript">
function myfunc(event, ui) {
}
$(document).ready(function () {
myfunc(event, ui)
});
</script>
would do it. It's obviously not an ideal solution as it still uses the anonymous but should solve any issues you have where you need to manipulate the function manually

Just define a named function:
function doSlide(event, ui)
{
$("#lblInfo").text("left");
}
$(document).ready(function() {
$("#wheelLeft").slider({
orientation: 'vertical', value: 37,
min: -100, max: 100,
slide: doSlide
});
});

$(document).ready(function myFunction() {
// do something
});