0

iziModal jquery プラグインとイオン レンジ スライダーを使用しています。基本的に、レコードを含むテーブルがあり、各レコードには、内部にスライダーがある iziModal を表示する編集ボタンがあります。

「slidersInit.js」というjsファイルにイオン範囲スライダープラグインの初期化があります

$(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
});

}))

実際のページで、スクリプトを呼び出します

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

イオン rangeslider と izimodal の前の一番下にあることに注意してください。

したがって、そのページには iziModal 構成もあります

  $(document).ready(function () {

        $("#modal").iziModal({
            zindex: 3000,
            width: 900,
            onOpening: function (modal) {                  

                modal.startLoading();
                //ajax call
                //update ion range sliders with new values
            }
        });
  });

問題は何らかの理由で iziModal を開くと、すべてのスライダーが 0 に表示されます。これは、iziModal が開く前にスライダーが初期化されていないことを意味し、Modal open 関数内で初期化した場合にのみ機能します。

問題は、レコード編集ボタンをクリックしてモーダルを呼び出すたびにスライダーの初期化を呼び出すと機能しないため、iziModal の外でこれを実行したいことです。以前の値が保持され、更新されません。

それで、モーダルが初期化される前にスライダーが初期化されるのを待つことができる方法はありますか?

4

1 に答える 1