Greetings TB Team-
Might have a modified code from previously provided Community postings for SweetAlert integrations. If anyone would like to confirm that it works for you, please test it out. With the various uses and adaptations that others have in their applications, I’d like to know if the adjusted code works for others.
Install current version of SweetAlert in Application Custom header/footer settings (in footer):
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
Code for Page where form is used (not an action link):
TB.render('component_3', function(data) {
setTimeout(function() {
// Hide the original button and add the 'original' class
var btn = $(".af-form-submit", data.ele)
.hide()
.addClass('original');
// Clone the button, remove the 'original' class, and show it
btn.clone(true)
.off()
.removeClass('original')
.appendTo(btn.parent())
.show();
// Attach the click event handler to the cloned button
jQuery('.af-form-submit:not(.original)', data.ele).on('click', function() {
Swal.fire({
title: 'Are you sure?',
text: "Do you want to submit this resource request?",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#1552ff',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, submit it!',
customClass: {
popup: 'swal2-large-font'
}
}).then((result) => {
if (result.isConfirmed) {
// Trigger the click event on the original button if the user confirms
jQuery('.af-form-submit.original', data.ele).trigger("click");
}
});
// Return false to prevent the default action of the cloned button
return false;
});
});
});
CSS for font size:
.swal2-large-font {
font-size: 18px; /* Adjust the size as needed */
}
Final results:
Cheers,
Adam
P.S. ALL CREDIT FOR THIS IS PROVIDED TO KEVIN RUIZ (@kruizf201).
