У меня есть страница, которая представляет собой гигантский контрольный список.Если вы нажмете кнопку, чтобы отредактировать элемент контрольного списка, появится модальное окно.На этом модале есть радио, чтобы выбрать, были ли обнаружены проблемы или нет во время проверки.Если выбрано «да», отображается скрытый элемент div, чтобы можно было вставить дополнительную информацию перед отправкой.
Вот пример модальной модели, в настоящее время на странице 60.
<!-- modal window for submiting check-->
<div id="edit3" class="text-left g-max-width-800 g-bg-white g-overflow-y-auto g-pa-20" style="display: none;">
<button type="button" class="close" onclick="Custombox.modal.close();"><i class="hs-icon hs-icon-close"></i></button>
<h4 class="g-mb-20">Update Record for Empirix->SIP:500 Baseline</h4>
<form action="actions.php" method="POST">
<!-- Checkbox -->
<div class="g-mb-15">
<label class="form-check-inline u-check g-pl-25 ml-0 g-mr-25">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue3" type="radio" value="0" checked="">
<div class="u-check-icon-radio-v4 g-absolute-centered--y g-left-0 g-width-18 g-height-18">
<i class="g-absolute-centered d-block g-width-10 g-height-10 g-bg-primary--checked"></i>
</div>
No Issues
</label>
<label class="form-check-inline u-check g-pl-25 ml-0 g-mr-25">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue3" type="radio" value="1">
<div class="u-check-icon-radio-v4 g-absolute-centered--y g-left-0 g-width-18 g-height-18">
<i class="g-absolute-centered d-block g-width-10 g-height-10 g-bg-primary--checked"></i>
</div>
Issue Found
</label>
</div>
<input type="hidden" name="action" value="subcheck">
<input type="hidden" name="id" value="3">
<div id="ifYes3" class="g-mb-15 desc3" style="display:none">
<div class="form-group g-mb-20">
<label class="g-mb-10" for="inputGroup1_1">INC Ticket</label>
<input id="inputGroup1_1" class="form-control form-control-md rounded-0" type="text" placeholder="INC Ticket #" name="inc_tick">
</div>
<div class="form-group g-mb-20">
<label class="g-mb-10" for="inputGroup2_1">Brief Description</label>
<textarea id="inputGroup2_1" class="form-control form-control-md g-resize-none rounded-0" rows="3" name="problem" placeholder="If you found an issue, please provide a short overview."></textarea>
</div>
</div>
<div align="right">
<button type="submit" class="btn u-btn-primary g-mr-20 g-mb-1">Submit</button>
</div>
</form>
</div>
<!-- End modal window -->
Затем у меня есть этот ajax-код для выполнения обновления, и вы заметите, что у меня есть переключение jq для каждого из 60 делений здесь.
var interval = 10000; //number of mili seconds between each call
var refresh = function() {
$.ajax({
url: "ops_controller.php",
cache: false,
success: function(html) {
$("[name=issue1]").click(function(){
$('.desc1').toggle();
$("#ifYes1-"+$(this).val()).show('slow');
});
<!-- Cut out 58 similar functions -->
$("[name=issue59]").click(function(){
$('.desc59').toggle();
$("#ifYes59-"+$(this).val()).show('slow');
});
$("[name=issue60]").click(function(){
$('.desc60').toggle();
$("#ifYes60-"+$(this).val()).show('slow');
});
$('#table-refresh').html(html);
setTimeout(function() {
refresh();
}, interval);
}
});
};
refresh();
У меня тогда тот же код (60 функций jq)в другой функции
$( document ).ajaxStop(function() {
$.HSCore.components.HSModalWindow.init('[data-modal-target]');
$.HSCore.components.HSPopup.init('.js-fancybox', {
btnTpl: {
smallBtn: '<button data-fancybox-close class="btn g-pos-abs g-top-25 g-right-30 g-line-height-1 g-bg-transparent g-font-size-16 g-color-gray-light-v3 g-brd-none p-0" title=""><i class="hs-admin-close"></i></button>'
}
});
$('[data-toggle="tooltip-show"]').tooltip('show');
$("[name=issue1]").click(function(){
$('.desc1').toggle();
$("#ifYes1-"+$(this).val()).show('slow');
});
<!-- cut out 58 other items -->
$("[name=issue59]").click(function(){
$('.desc59').toggle();
$("#ifYes59-"+$(this).val()).show('slow');
});
$("[name=issue60]").click(function(){
$('.desc60').toggle();
$("#ifYes60-"+$(this).val()).show('slow');
});
});
});
Причина, по которой я это сделал, заключается в том, что этот переключатель будет работать при загрузке и обновлении страницы ajax каждые 10 секунд.Я очень новичок в jQuery / AJAX, так что прости мое невежество.Через два дня я пришёл к этому, чтобы заставить его работать после обновления страницы.
Конечно, должен быть более чистый метод, чем тот, который я здесь делаю.