Mdbootstrap - django - htmx

benjamin24 pro premium priority commented 5 months ago

how exactly is this done? I am facing the same problem. Htmx is hard to combine with MDB. My first approach was this below and it worked but I have select Boxes that send htmx requests and initializing the mdb.Select after such a request leads to an error:

    // Start observing the document body for changes
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

 // Iterate over each attribute and initialize the corresponding component
        Object.keys(mdbAttributeMap).forEach(attribute => {
            initializeMDBComponent(attribute, mdbAttributeMap[attribute], target);
        });
    }

    function initializeMDBComponent(attribute, ComponentClass, target) {
        target.querySelectorAll([${attribute}]).forEach(el => {
            new ComponentClass(el);
        });
    }

function initializeMDBComponents(target) {
        const mdbAttributeMap = {
            'data-mdb-collapse-init': mdb.Collapse, // Accordion, Collapse
            'data-mdb-alert-init': mdb.Alert, // Alert
            'data-mdb-button-init': mdb.Button, // Button
            'data-mdb-carousel-init': mdb.Carousel, // Carousel
            'data-mdb-dropdown-init': mdb.Dropdown, // Dropdown
            'data-mdb-input-init': mdb.Input, // Input
            'data-mdb-modal-init': mdb.Modal, // Modal
            'data-mdb-popover-init': mdb.Popover, // Popovers
            'data-mdb-range-init': mdb.Range, // Range
            'data-mdb-ripple-init': mdb.Ripple, // Ripple
            'data-mdb-scrollspy-init': mdb.Scrollspy, // Scrollspy
            'data-mdb-tab-init': mdb.Tab, // Tabs
            'data-mdb-pill-init': mdb.Pill, // Pills
            'data-mdb-toast-init': mdb.Toast, // Toast
            'data-mdb-tooltip-init': mdb.Tooltip, // Tooltip
            'data-mdb-chart-init': mdb.Chart, // Charts
            'data-mdb-chips-input-init': mdb.ChipsInput, // Chips
            'data-mdb-chip-init': mdb.Chip, // Chip
            'data-mdb-datatable-init': mdb.Datatable, // Datatable
            'data-mdb-datetimepicker-init': mdb.Datetimepicker, // Datetimepicker
            'data-mdb-datepicker-init': mdb.Datepicker, // Datepicker
            'data-mdb-loading-init': mdb.Loading, // Loading management
            'data-mdb-multi-range-slider-init': mdb.MultiRangeSlider, // Multi Range
            'data-mdb-select-init': mdb.Select, // Select
            'data-mdb-timepicker-init': mdb.Timepicker, // Timepicker
            'data-mdb-animation-init': mdb.Animation, // Animate
            'data-mdb-clipboard-init': mdb.Clipboard, // Clipboard
            'data-mdb-infinite-scroll-init': mdb.InfiniteScroll, // Infinite Scroll
            'data-mdb-lazy-load-init': mdb.LazyLoad, // Lazy Load
            'data-mdb-lightbox-init': mdb.Lightbox, // Lightbox
            'data-mdb-navbar-init': mdb.Navbar, // Navbar
            'data-mdb-perfect-scrollbar-init': mdb.PerfectScrollbar, // Perfect Scrollbar
            'data-mdb-popconfirm-init': mdb.Popconfirm, // Popconfirm
            'data-mdb-rating-init': mdb.Rating, // Rating
            'data-mdb-sidenav-init': mdb.Sidenav, // Sidenav
            'data-mdb-smooth-scroll-init': mdb.SmoothScroll, // Smooth Scroll
            'data-mdb-stepper-init': mdb.Stepper, // Stepper
            'data-mdb-sticky-init': mdb.Sticky, // Sticky
            'data-mdb-touch-init': mdb.Touch, // Touch
            'data-mdb-calendar-init': mdb.Calendar, // Calendar
            'data-mdb-captcha-init': mdb.Captcha, // Captcha
            'data-mdb-color-picker-init': mdb.ColorPicker, // Color Picker
            'data-mdb-countdown-init': mdb.Countdown, // Countdown
            'data-mdb-draggable-init': mdb.Draggable, // Drag And Drop
            'data-mdb-sortable-init': mdb.Sortable, // Drag And Drop - Sortable
            'data-mdb-dummy-init': mdb.Dummy, // Dummy
            'data-mdb-ecommerce-gallery-init': mdb.EcommerceGallery, // Ecommerce Gallery
            'data-mdb-file-upload-init': mdb.FileUpload, // File Upload
            'data-mdb-input-mask-init': mdb.InputMask, // Input Mask
            'data-mdb-mention-init': mdb.Mention, // Mention
            'data-mdb-multi-carousel-init': mdb.MultiCarousel, // Multi Item Carousel
            'data-mdb-onboarding-init': mdb.Onboarding, // Onboarding
            'data-mdb-parallax-init': mdb.Parallax, // Parallax
            'data-mdb-scroll-status-init': mdb.ScrollStatus, // Scroll Status
            'data-mdb-table-editor-init': mdb.TableEditor, // Table Editor
            'data-mdb-treetable-init': mdb.Treetable, // TreeTable
            'data-mdb-treeview-init': mdb.Treeview, // Treeview
            'data-mdb-vector-map-init': mdb.VectorMap, // Vector Maps
            'data-mdb-wysiwyg-init': mdb.Wysiwyg // WYSIWYG Editor
        };

benjamin24 pro premium priority commented 5 months ago

Also, data-mdb-file-upload-init does not work with htmx even with my solution above

Grzegorz Bujański staff commented 5 months ago

Are you sure the code you sent was added correctly? it looks as if function initializeMDBComponents(target) was supposed to be at the beginning, not at the end.

Do you have any errors in the console?

Kamila Pieńkowska staff commented 7 months ago

Every component have JS init example in Usage section of API Tab. Example for select: https://mdbootstrap.com/docs/standard/forms/select/#api-section-usage https://mdbootstrap.com/snippets/standard/kpienkowska/6052230

Alternatively you can use getOrCreateInstance method on every f.e. select on the page after you add content that way only select components that weren't initialized before.