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 の外でこれを実行したいことです。以前の値が保持され、更新されません。
それで、モーダルが初期化される前にスライダーが初期化されるのを待つことができる方法はありますか?