HTMX snippets ¶

{% block javascripts %}
    {{ block.super }}
    <script type="text/javascript">
        (function($){
            $(document).ready(function() {
                // https://stackoverflow.com/questions/67681380/using-bootstrap-datepicker-with-htmx#76926066
                $('.vDateField').on('change', function(e) {
                    console.log('change')
                    htmx.trigger('input', 'change')
                })
            });
        }(grp.jQuery));
    </script>
{% endblock %}

{#    By default, HTMX works with HTML responses,                                        #}
{#    but with a combination of hx-swap="none" and event listeners like htmx:response,   #}
{#    you can seamlessly handle JSON responses and dynamically update your UI.           #}
{#    This allows you to combine HTMX's declarative syntax                               #}
{#    with the flexibility of JavaScript for dynamic content rendering.                  #}
<table id="canisters-table" class="table-auto"
       hx-get="{% url 'unidrv:device-read-device-canisters' original.id %}"
       hx-trigger="load"
       hx-swap="none"
>
    <thead>
        <tr>
            ...
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>
    document.getElementById('canisters-table').addEventListener('htmx:afterRequest', function(event) {
        const response = event.detail.xhr.response
        //const tbody = event.target.querySelector('tbody');
        const canisters = JSON.parse(response)
        populate_canisters_table(canisters, last_recipe)
    });
</script>