search

htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.85k stars 307 forks source link

Preline with Laravel and Livewire not working #250

Closed pippos44 closed 9 months ago

pippos44 commented 9 months ago

Hello everyone,

I've successfully followed the installation steps for integrating Preline with Laravel. However, I suspect I may have misunderstood its proper usage, especially when dealing with dependent components through JavaScript.

Let's focus on the example of dismissing the Cookie consent. Preline initializes JS and binds it to the element with the id data-hs-remove-element="#cookies-with-stacked-buttons". This element should be removed from the DOM when someone clicks the X button.

I've included it in my Single Page Application (SPA) as a Blade component under the main layout Blade template for Livewire. After the full page load, I can confirm that the dismiss button effectively removes the cookie consent component. However, if I attempt to navigate without dismissing the cookie component using Livewire, I encounter an issue where the dismiss functionality is not working.

My question now is whether this issue arises because the page re-renders in the DOM, and the cookies-with-stacked-buttons element should reinitialize the JS code from Preline to bind it in the DOM again?

Thanks

olegpix commented 9 months ago

Hello everyone,

I've successfully followed the installation steps for integrating Preline with Laravel. However, I suspect I may have misunderstood its proper usage, especially when dealing with dependent components through JavaScript.

Let's focus on the example of dismissing the Cookie consent. Preline initializes JS and binds it to the element with the id data-hs-remove-element="#cookies-with-stacked-buttons". This element should be removed from the DOM when someone clicks the X button.

I've included it in my Single Page Application (SPA) as a Blade component under the main layout Blade template for Livewire. After the full page load, I can confirm that the dismiss button effectively removes the cookie consent component. However, if I attempt to navigate without dismissing the cookie component using Livewire, I encounter an issue where the dismiss functionality is not working.

My question now is whether this issue arises because the page re-renders in the DOM, and the cookies-with-stacked-buttons element should reinitialize the JS code from Preline to bind it in the DOM again?

Thanks

Hello, I think yes. If the page has been reloaded, you should reinitialize the element on the appropriate event (after the element exists in the DOM) using the global static method window.HSStaticMethods.autoInit() or window.HSStaticMethods.autoInit(["remove -element"]) or a list of plugins that need to be reinitialized, for example window.HSStaticMethods.autoInit(["accordion", "carousel", "remove-element"])

pippos44 commented 9 months ago

Nice, that worked like a charm, thanks! I just wrapped them in the livewire component and when it loaded into DOM it bind the plugins back again. Why this is not added under Laravel installation guide?. I can see that is added in other SPA language for installation which I missed it. When using Livewire to navigate between components you need to re initialize the plugins.

jahaganiev commented 9 months ago

Hey @pippos44 - thanks for the suggestion. We will add a Livewire Framework Guides page in future updates.

codecapsules commented 2 months ago

Hello when the Livewire 3 integration guide will be in the documentation :) ? thanks you.