fran/hxbooks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix tom selects getting destroyed on book changes

Browse Source
This commit is contained in:
Francisco Penedo Alvarez
2024-04-24 21:22:23 +02:00
parent 2e62ab4fb8
commit 18d320422a
2 changed files with 27 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/hxbooks/templates/base.html.j2
View File

@@ -14,6 +14,29 @@
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static',
filename='favicon-16x16.png') }}"> filename='favicon-16x16.png') }}">
<link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}"> <link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
<script src="{{ url_for('static', filename='htmx.min.js') }}"></script>
<script src="{{ url_for('static', filename='alpine.min.js') }}" defer></script>
<script src="{{ url_for('static', filename='tom-select.complete.min.js') }}"></script>
<script>
htmx.on('htmx:beforeHistorySave', function () {
// find all TomSelect elements
document.querySelectorAll('.tomselect')
.forEach(elt => elt.tomselect ? elt.tomselect.destroy() : null) // and call destroy() on them
});
document.addEventListener('htmx:beforeSwap', function (evt) {
// alert on errors
if (evt.detail.xhr.status >= 400) {
error_dialog = document.querySelector('#error-alert');
error_dialog.querySelector('.modal-title').textContent = 'Error ' + evt.detail.xhr.status;
error_dialog.querySelector('.modal-body').innerHTML = evt.detail.xhr.response;
error_dialog.showModal();
}
});
</script>
</head> </head>
<body hx-boost="true" hx-push-url="true" hx-target="body"> <body hx-boost="true" hx-push-url="true" hx-target="body">
@@ -58,31 +81,7 @@
</div> </div>
</div> </div>
</dialog> </dialog>
</main> </main>
<script src="{{ url_for('static', filename='htmx.min.js') }}"></script>
<script src="{{ url_for('static', filename='alpine.min.js') }}" defer></script>
<script src="{{ url_for('static', filename='tom-select.complete.min.js') }}"></script>
<script>
htmx.on('htmx:beforeHistorySave', function () {
// find all TomSelect elements
document.querySelectorAll('.tomselect')
.forEach(elt => elt.tomselect ? elt.tomselect.destroy() : null) // and call destroy() on them
});
document.addEventListener('htmx:beforeSwap', function (evt) {
// alert on errors
if (evt.detail.xhr.status >= 400) {
error_dialog = document.querySelector('#error-alert');
error_dialog.querySelector('.modal-title').textContent = 'Error ' + evt.detail.xhr.status;
error_dialog.querySelector('.modal-body').innerHTML = evt.detail.xhr.response;
error_dialog.showModal();
}
});
</script>
</body> </body>
</html> </html>

8
src/hxbooks/templates/books/book.html.j2
View File

@@ -8,8 +8,8 @@
<div> <div>
{% block form %} {% block form %}
<form class="row row-cols-1 row-cols-xxl-2" hx-put="/books/{{ book.id }}" hx-trigger="change" hx-swap="none" <form class="row row-cols-1 row-cols-xxl-2" hx-put="/books/{{ book.id }}" hx-trigger="change" hx-push-url="false"
method="post"> hx-swap="none" method="post">
{% from "error_feedback.html.j2" import validation_error %} {% from "error_feedback.html.j2" import validation_error %}
{% macro simple_field(field, name, value, type) %} {% macro simple_field(field, name, value, type) %}
<label class="form-label" for="{{ field }}">{{ name }}:</label> <label class="form-label" for="{{ field }}">{{ name }}:</label>
@@ -94,9 +94,9 @@
<div class="pt-2"> <div class="pt-2">
<input class="btn btn-primary" type="submit" hx-post="/books/{{ book.id }}" hx-target="body" <input class="btn btn-primary" type="submit" hx-post="/books/{{ book.id }}" hx-target="body"
hx-swap="innerHTML" value="Submit"> hx-swap="innerHTML" hx-push-url="true" value="Submit">
<button class="btn btn-danger" hx-delete="/books/{{ book.id }}" hx-target="body" hx-swap="innerHTML" <button class="btn btn-danger" hx-delete="/books/{{ book.id }}" hx-target="body" hx-swap="innerHTML"
hx-confirm="Are you sure?">Delete</button> hx-confirm="Are you sure?" hx-push-url="true">Delete</button>
</div> </div>
</div> </div>
</form> </form>