Greetings TB Community-
Would appreciate anyone testing the following out on an action link button to make sure it works across the TB platform for a SweetAlert popup.
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 Javascript Tab where action link is located:
NOTE: Change the component ID, and the CSS class for the action link (e.g. “delete-button”)
TB.render('component_X', function(data) {
setTimeout(function() {
// Hide the original delete buttons and add the 'original' class
$(".delete-button a", data.ele).each(function() {
var btn = $(this);
btn.hide().addClass('original');
// Clone each button, remove the 'original' class, and show it
var clonedBtn = btn.clone(true)
.off() // Remove any existing event handlers
.removeClass('original')
.appendTo(btn.parent())
.show();
// Attach the click event handler to the cloned button
clonedBtn.on('click', function(event) {
event.preventDefault(); // Prevent the default action
event.stopPropagation(); // Stop the event from propagating
Swal.fire({
title: 'Confirm Deletion',
text: 'Are you sure you want to delete this HVA/Risk Assessment and all associated hazards?',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
customClass: {
popup: 'swal2-large-font'
}
}).then((result) => {
if (result.isConfirmed) {
// Trigger the click event on the original delete button if the user confirms
btn.trigger('click');
}
});
});
});
});
});
CSS for font size:
.swal2-large-font {
font-size: 18px; /* Adjust the size as needed */
}
Final results:
Cheers,
Adam