[BUG] Toasts are not displayed in version 0.12.12

[jmsanchez-ibiza]

Until now, my application used version 0.12.6, and toasts were displayed at the bottom of the screen. But I updated to the latest version 0.12.12, which supposedly fixed the issue, and to my surprise, the toasts no longer appear. I tested with a simple app, and the toasts show correctly, so I suspect some interference with my code.

I suspect the code in my main.js, which I'm copying below:

// DataTables initialization and event handling for HTMX
// This script initializes DataTables on elements with the class "datatable"
document.addEventListener("DOMContentLoaded", () => {
    document.body.addEventListener('htmx:afterSwap', (e) => {
        console.log("📦 htmx:afterSwap event received");

        const tables = document.querySelectorAll(".datatable");
        console.log("🔍 Looking for .datatable...");

        tables.forEach(table => {
            console.log(`➡️ Init DataTable for: #${table.id}`);
            
            if ($.fn.DataTable.isDataTable(table)) {
                console.warn("⚠️ Table already initialized. Destroying existing instance.");

                $(table).DataTable().destroy();

                const clonedTable = table.cloneNode(true);
                table.parentElement.replaceChild(clonedTable, table);
                table = clonedTable;
            }

            const $table = $(table);
            // DataTable configuration in Spanish
            $table.DataTable({
                renderer: 'bootstrap',
                language: {
                    decimal: ",",
                    processing: "Procesando...",
                    search: "Buscar:",
                    lengthMenu: "Mostrar _MENU_",
                    info: "Mostrando (_START_ a _END_) de _TOTAL_ registros",
                    infoEmpty: "No hay datos que mostrar.",
                    infoFiltered: "(filtrado de _MAX_ registros en total)",
                    loadingRecords: "Cargando...",
                    zeroRecords: "No se encontraron registros coincidentes",
                    emptyTable: "No hay datos disponibles en la tabla",
                    paginate: {
                        first: "<<",
                        previous: "<",
                        next: ">",
                        last: ">>"
                    },
                    aria: {
                        sortAscending: ": activar para ordenar la columna de manera ascendente",
                        sortDescending: ": activar para ordenar la columna de manera descendente"
                    }
                },
                layout: {
                    topStart: 'info',
                    topEnd: {
                        search: { placeholder: 'Buscar ...' },
                    },
                    bottomStart: 'pageLength',
                    bottomEnd: {
                        paging: { firstLast: false }
                    }
                },
                initComplete: function () {
                    htmx.process(this.api().table().node());
                },
                drawCallback: function () {
                    const rows = this.api().rows({ page: 'current' }).nodes();
                    rows.each(function (row) {
                        htmx.process(row); // 🔥 this reactivates the buttons in each visible row
                    });
                },
                // dom: 'Bfrtip',
                // buttons: [
                //     {
                //         extend: 'excelHtml5',
                //         text: '<i class="bi bi-file-earmark-excel"></i> Export records',
                //         className: 'btn btn-success btn-sm',
                //         exportOptions: {
                //             modifier: {
                //                 page: 'current'  // Solo exporta los visibles
                //             }
                //         }
                //     }
                // ],
            });

            // Focus on search field
            document.querySelector(`#${table.id}_wrapper .dt-search input`)?.focus();
        });
    });
});

// Bootstrap 5.3.0 - Collapse
// This script handles the collapse functionality of the Bootstrap navbar
document.addEventListener('DOMContentLoaded', function () {
    const navbarCollapse = document.querySelector('.navbar-collapse');
    const navLinks = document.querySelectorAll('.navbar-collapse .nav-link, .navbar-collapse .dropdown-item');

    navLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            // Do not close if the click was on the dropdown button.
            if (link.getAttribute('data-bs-toggle') === 'dropdown') {
                return;
            }

            // Close the menu if it is expanded.
            if (navbarCollapse.classList.contains('show')) {
                const bsCollapse = bootstrap.Collapse.getInstance(navbarCollapse);
                if (bsCollapse) {
                    bsCollapse.hide();
                }
            }
        });
    });
});

This code is meant to interact with Datatable.js and Bootstrap, addressing some unusual behaviors from these two libraries. I suspect the conflict stems from the htmx:afterSwap Listener.

[jmsanchez-ibiza]

Please delete this issue. I have tried without including this code and the toasts still do not appear. On the other hand, with version 0.12.1 they appear correctly at the top of the screen and with version 0.12.6 they appear correctly at the bottom of the screen.

[mjscriba]

I think this is still a bug, and possibly related to https://github.com/AnswerDotAI/fasthtml/issues/712

The code to display toasts is being returned in the HTML response, but it is no longer being picked up and rendered correctly.

[mjscriba]

And I can confirm that a downgrade to 0.12.8 fixes the issue. So I wonder if it had anything to do with the CDN network switch, which was introduced in 0.12.9?

[michela]

Sttill an issue in 0.12.14

[78wesley]

It has been fixed since version 0.12.12. You can test it out here https://github.com/78wesley/fasthtml-test-toaster. Test it here: https://fasthtml-test-toaster.vercel.app/

[michela]

Thanks. Confirming working in 0.12.19