i'm currently trying to solve the issue of JS not loading for dynamic modals.
The modals are called by using:
<a href="#" class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1"
id="<?php echo $row['id']; ?>" data-bs-toggle="modal" data-bs-
target="#kt_modal_new_target_<?php echo $sald_id; ?>">
The modal loads up, but all the functions, like SweetAlert2, FormValidation doesn't seem to be working. I've tried using wildcard for the querySelector but that did't seem to help, as the functions would only work on the first modal generated. Is there any way to call the js after every modal creation?
The .js file that contains the functions.
"use strict";
var KTModalNewCard = function () {
var submitButton;
var cancelButton;
var validator;
var form;
var handleForm = function() {
validator = FormValidation.formValidation(
form,
{
fields: {
'sald_nr': {
validators: {
notEmpty: {
message: 'Nurodykite Vardą ir Pavardę!'
}
}
},
'receiver_email': {
validators: {
emailAddress: {
message: 'Klaidingas el. pašto adreso formatas'
}
}
},
'coupon_value': {
validators: {
notEmpty: {
message: 'Nurodykite kupono vertę!'
}
}
},
'coupon_term': {
validators: {
notEmpty: {
message: 'Nurodykite kupono galiojimo terminą!'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Action buttons
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
setTimeout(function() {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Kuponas sukurtas sėkmingai!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Gerai!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
modal.hide();
}
});
}, 2000);
} else {
// Show error message.
Swal.fire({
text: "Kuriant kuponą rasta klaidų, bandykite dar kartą.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Gerai!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
cancelButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Ar tikrai norite atšaukti?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Taip, atšaukti",
cancelButtonText: "Grįžti",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Kupono kūrimas neatšauktas",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Gerai!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
}
return {
init: function () {
modalEl = document.querySelector("[id^='kt_modal_new_target_']");
if (!modalEl) {
return;
}
modal = new bootstrap.Modal(modalEl);
form = document.querySelector("[id^='kt_modal_new_target_form_']");
submitButton = document.querySelector("[id^='kt_modal_new_target_submit_']");
cancelButton = document.querySelector("[id^='kt_modal_new_target_cancel_']");
initForm();
handleForm();
}
};
}();
KTUtil.onDOMContentLoaded(function () {
KTModalNewCard.init();
});
The form:
<form id="kt_modal_new_target_form_<?php echo $sald_id; ?>" class="form" name="kt_modal_new_target_form_<?php echo $nr; ?>">
<!--begin::Heading-->
<div class="mb-13 text-center">
<!--begin::Title-->
<h1 class="mb-3">Šaldytuvo Nr. <?php echo $nr; ?> nustatymai</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="text-gray-400 fw-bold fs-5">Jei kyla neaiškumų, papildomą informaciją rasite
<a href="#" class="fw-bolder link-primary">čia</a>.</div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="fv-row">
<label class="required fs-6 fw-bold mb-2">
Šaldytuvo numeris</label>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Nurodykite tik numerį"></i>
<input type="text" class="form-control form-control-solid" value="<?php echo $nr; ?>" id="sald_nr_input" name="sald_nr" required/>
<input type="hidden" id="sald_nr" name="sald_id" value="<?php echo $sald_id; ?>">
<input type="hidden" id="sald_nr_old" name="sald_nr_old" value="<?php echo $nr; ?>">
<!--end::Input-->
</div>
<br>
<div class="fv-row">
<label class="required fs-6 fw-bold mb-2">
Šaldytuvo zona</label>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Nurodykite zoną"></i>
<input type="text" class="form-control form-control-solid" value="<?php echo $zona; ?>" name="sald_zona" required/>
<!--end::Input-->
</div><br>
<div class="d-flex flex-stack">
<!--begin::Label-->
<div class="me-5">
<label class="fs-6 fw-bold form-label">Ar rodyti šį šaldytuvą sąraše?</label>
<div class="fs-7 fw-bold text-gray-400">Jei šaldytuvas nebus rodomas, nebus galimybės pildyti jo temperatūrinių parodymų.</div>
</div>
<!--end::Label-->
<!--begin::Switch-->
<div class="fv-row">
<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" name="checkbox" value="1" <?php if($sald_status == "1"){ ?>
checked="checked"
<?php } ?>/>
<span class="form-check-label fw-bold text-gray-400">Rodyti</span>
</label>
<!--end::Switch-->
</div>
</div><br>
<script>
</script>
<div class="text-center">
<button type="reset" id="kt_modal_new_target_cancel_<?php echo $sald_id; ?>" class="btn btn-white me-3">Atšaukti</button>
<button type="submit" id="kt_modal_new_target_submit_<?php echo $sald_id; ?>" class="btn btn-primary">
<span class="indicator-label">Išsaugoti</span>
<span class="indicator-progress">Prašome palaukti...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
</div>
<!--end::Actions-->
</form>
Any suggestion on how to make the dynamic modals use these functions? Thanks in advance.