38 lines
1.1 KiB
HTML
38 lines
1.1 KiB
HTML
{% extends "main/base/layout.html" %}
|
|
{% from "main/components/toast.html" import toast %}
|
|
{% from "main/components/js_alert.html" import js_alert %}
|
|
|
|
|
|
{% block content %}
|
|
{{ js_alert("Just few lines of JavaScript used to pop toast.") }}
|
|
|
|
<form
|
|
hx-post="{{ url("form-validation") }}"
|
|
hx-target="#validation-form-content"
|
|
hx-swap="outerHTML"
|
|
>
|
|
<div class="card p-4">
|
|
{% include "main/form_validation_content.html" %}
|
|
<div class="d-flex">
|
|
<button type="submit" class="btn btn-success ms-auto">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
{{ toast(title="Form validated and saved successfully. Sorry, but I used few lines of JS code for this toast.", id="toast-success") }}
|
|
|
|
|
|
<script>
|
|
let toastSuccess = null;
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const toastElement = document.querySelector("#toast-success");
|
|
toastSuccess = new bootstrap.Toast(toastElement, {
|
|
delay: 3000,
|
|
})
|
|
});
|
|
</script>
|
|
{% endblock %}
|