Wait until jquery plugin on another plugin init

Question

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?

score 0 · Answer 1 · answered May 07 '19 at 10:18

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...

Wait until jquery plugin on another plugin init

1 Answers1