Add a spinner when sending a ticket
Posted: Tue Mar 05, 2024 12:44 pm
Hi, there,
I noticed that when a ticket was being sent, we had no notification to wait. So I added a modal with a spinner. If you're interested, here's how to do it:
Open theme/hesk3/customer/create-ticket/create-ticket.php
Add this code (for example, just before the <div class="form-footer"> tag), and change the display text as you wish:
Then, still in the same file, add this script after the others (just before the RECAPTCHA logic):
Now you need to pass the showLoadingMessage function to the form's onSubmit :
Now go to the app.css file in theme/hesk3/customer/css and add this code:
If you're not using debug mode, I think you'll have to minify it and then replace app.min.css
If you've followed this correctly, you should normally have a popup with a spinner while the ticket is being sent, and once it's been sent, the popup closes.
Result :
Don't hesitate if you need help! Thank you
I noticed that when a ticket was being sent, we had no notification to wait. So I added a modal with a spinner. If you're interested, here's how to do it:
Open theme/hesk3/customer/create-ticket/create-ticket.php
Add this code (for example, just before the <div class="form-footer"> tag), and change the display text as you wish:
Code: Select all
<div id="loading-overlay" class="loading-overlay">
<div id="loading-message" class="loading-message">
<div class="spinner"></div>
<p>Envoi en cours, merci de patienter...</p>
</div>
</div>
Code: Select all
<script>
function showLoadingMessage() {
// Show loading message
document.getElementById('loading-overlay').style.display = 'block';
// You may also want to disable the submit button to prevent multiple submissions
document.getElementById('recaptcha-submit').disabled = true;
}
</script>
Code: Select all
<form class="form form-submit-ticket ticket-create <?php echo count($_SESSION['iserror']) ? 'invalid' : ''; ?>" method="post" action="submit_ticket.php?submit=1" name="form1" id="form1" enctype="multipart/form-data" onsubmit="showLoadingMessage()">Code: Select all
.loading-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Fond grisant semi-transparent */
z-index: 9999; /* Assure que la modal est au-dessus de tout le reste */
}
.loading-message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.spinner {
border: 4px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top: 4px solid #156cc8; /* Couleur du spinner */
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
If you've followed this correctly, you should normally have a popup with a spinner while the ticket is being sent, and once it's been sent, the popup closes.
Result :
Don't hesitate if you need help! Thank you
