html
<div id="loading-spinner" style="display: none;">
<!-- Add your spinner image or loading text here -->
Loading...
</div>
หรือ
<div id="loading-spinner" style="display: none; color: purple; font-size: 20px;">
<!-- Customize the text and style as needed -->
<strong>Loading...</strong>
</div>
<javascript>
<script>
$(document).ready(function() {
$('.popup-link').click(function(e) {
e.preventDefault();
var url = $(this).data('url');
openModalWithData(url);
});
$('#selectAll').click(function() {
// Show the spinner when the button is clicked
$('#loading-spinner').show();
});
// Assuming you have a form with the class 'your-form-class'
$(document).on('beforeSubmit', 'form[name="frmMain"]', function() {
// Show the spinner before form submission
$('#loading-spinner').show();
return true;
});
// If you're using Pjax, hide the spinner on successful Pjax response
$(document).on('pjax:success', function() {
$('#loading-spinner').hide();
});
// If you're not using Pjax, hide the spinner on any AJAX request completion
$(document).ajaxStop(function() {
$('#loading-spinner').hide();
});
});
function openModalWithData(url) {
$.ajax({
url: url,
method: 'GET',
success: function(response) {
$('#myModal .modal-body').html(response);
$('#myModal').modal('show');
},
error: function() {
alert('An error occurred while fetching data.');
}
});
}
</script>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น