I recently implemented AJAX validation for an input field on my django site by following a tutorial. While it works well, I want to maintain the use of toasts for user alerts, rather than traditional alerts.
$("#id_hub_name").focusout(function (e) {
e.preventDefault();
var hub_name = $(this).val();
$.ajax({
type: 'GET',
url: "{% url 'validate_hubname' %}",
data: {"hub_name": hub_name},
success: function (response) {
if(!response["valid"]){
// replace alert with toast
showToast("You cannot create a hub with same hub name", 'error');
var hubName = $("#id_hub_name");
hubName.val("")
hubName.focus()
}
},
error: function (response) {
console.log(response)
}
})
})
My goal is to modify the alert functionality in the JS to use toasts instead. In my base.html file, I have already set up a way to dynamically create different types of toasts based on messages received.
{% if messages %}
<div class="message-container">
{% for message in messages %}
{% with message.level as level %}
{% if level == 40 %}
{% include 'includes/toasts/toast_error.html' %}
{% elif level == 30 %}
{% include 'includes/toasts/toast_warning.html' %}
{% elif level == 25 %}
{% include 'includes/toasts/toast_success.html' %}
{% else %}
{% include 'includes/toasts/toast_info.html' %}
{% endif %}
{% endwith %}
{% endfor %}
</div>
{% endif %}
Any help or suggestions are greatly appreciated.