v2 only works once after page reload

[shanke-pvex]

I use Laravel 10 with inertia and vue3.
Every javascript trigger only works after a page reload.
When navigating to another page and go back in my SPA none of the javascript is working.

With version 1.9.0 everything is fine (except the new added plugins :)).

Is version 2.0 compatible with inertia?

[ashikck]

Same for me with react and vite.

[sebastianbilling]

Same for me with React and NextJS

[hiteshjoshi]

Same for me with Astro 3.5.x

[lenart]

Seems like it's the same story with Rails and Turbo. It works on initial page load but not after page is navigated.

[jahaganiev]

Hey everyone,

Our team just recently updated Framework Guides page with live playground demos for all v2 JS components. Please try out with the latest version and let us know if you still have any issues.

Cheers!

[ashikck]

Worked for me. Thanks alot

[ndrshnsn]

Seems like it's the same story with Rails and Turbo. It works on initial page load but not after page is navigated.

hey @lenart have you find any way to solve this? its working only with turbo: false...

[ndrshnsn]

Seems like it's the same story with Rails and Turbo. It works on initial page load but not after page is navigated.

hey @lenart have you find any way to solve this? its working only with turbo: false...

Just found myself and used other solutions as reference. Call Preline loaders into turbo:load event.

document.addEventListener("turbo:load", function(event) {
    HSAccordion.autoInit();
    HSDropdown.autoInit();
    HSOverlay.autoInit();
    HSSelect.autoInit();
});

and call it from your main application.js

[shanke-pvex]

Hey everyone,

Our team just recently updated Framework Guides page with live playground demos for all v2 JS components. Please try out with the latest version and let us know if you still have any issues.

Cheers!

It works

[lenart]

Seems like it's the same story with Rails and Turbo. It works on initial page load but not after page is navigated.

hey @lenart have you find any way to solve this? its working only with turbo: false...

Just found myself and used other solutions as reference. Call Preline loaders into turbo:load event.

document.addEventListener("turbo:load", function(event) {
    HSAccordion.autoInit();
    HSDropdown.autoInit();
    HSOverlay.autoInit();
    HSSelect.autoInit();
});

and call it from your main application.js

@ndrshnsn haven't had a chance to try it out myself but it seems like you should call HSStaticMethods.autoInit(); and don't have to deal with individual components. I'd probably put that code to turbo:visit dom event.

UPDATE: I did what I said above and it works.

[jahaganiev]

Huge thanks everyone for the updates and sharing the workaround with others - your contributions are truly appreciated!

@sebastianbilling @hiteshjoshi if you are still having an issue, please open a new issue with more details.

Cheers!

[sajjadgol]

I copied DOM when dropdown menu not work , below code generated :

<div class="hs-dropdown-menu min-w-[18rem] transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 sm:w-48 z-10 bg-white sm:shadow-md rounded-lg p-2 dark:bg-gray-800 sm:dark:border dark:border-gray-700 dark:divide-gray-700 before:absolute top-full sm:border before:-top-5 before:start-0 before:w-full before:h-5 block" data-popper-escaped="" data-popper-placement="bottom-start" style="position: fixed; inset: 0px auto auto 0px; transform: translate(1290px, 70px);">

and copied Dom when dropdown and other element work correctly , below code

<div class="hs-dropdown-menu min-w-[18rem] transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 sm:w-48 z-10 bg-white sm:shadow-md rounded-lg p-2 dark:bg-gray-800 sm:dark:border dark:border-gray-700 dark:divide-gray-700 before:absolute top-full sm:border before:-top-5 before:start-0 before:w-full before:h-5 hidden" style="">

many different , you can use Meld software for tracking differents

[ndrshnsn]

Seems like it's the same story with Rails and Turbo. It works on initial page load but not after page is navigated.

hey @lenart have you find any way to solve this? its working only with turbo: false...

Just found myself and used other solutions as reference. Call Preline loaders into turbo:load event.

document.addEventListener("turbo:load", function(event) {
    HSAccordion.autoInit();
    HSDropdown.autoInit();
    HSOverlay.autoInit();
    HSSelect.autoInit();
});

and call it from your main application.js

@ndrshnsn haven't had a chance to try it out myself but it seems like you should call HSStaticMethods.autoInit(); and don't have to deal with individual components. I'd probably put that code to turbo:visit dom event.

UPDATE: I did what I said above and it works.

Thanks, worked like a charm. Noted that if you need to use one of these components + Stimulus (dependent dropdowns, for ex) you should call them again in controller - like HSSelect.autoInit() in controller connect

Just sharing my findings ;)

[VishalLudhrani]

Huge thanks everyone for the updates and sharing the workaround with others - your contributions are truly appreciated!

@sebastianbilling @hiteshjoshi if you are still having an issue, please open a new issue with more details.

Cheers!

I still am facing issues.

I referred to the updated documentation, and made changes accordingly.
It works as intended during the development.

However, the build fails with ReferenceError: Self is not defined.

Please find the details here

[hiteshjoshi]

Hey everyone,

Our team just recently updated Framework Guides page with live playground demos for all v2 JS components. Please try out with the latest version and let us know if you still have any issues.

Cheers!

Still the same. If I add a new item on the fly after preline load, it won't work.

[hiteshjoshi]

Yup, it behaves very strange. Had to go back to v1.9.0

So at whatever point my dom adds a new dropdown it works in 1.9.0
but with 2.0.2 it doesnt work (sometimes it works after a few clicks but not always)

[zerobig]

I solved it.

./node_modules/preline/preline.d.ts
add lines:

declare global {
	interface Window {
		HSStaticMethods: {
			afterTransition(el: HTMLElement, cb: Function): void;
			getClassPropertyAlt(el: HTMLElement, prop?: string, val?: string): string;
			getClassProperty(el: HTMLElement, prop?: string, val?: string): string;
			autoInit(collection: string | string[] = 'all'): void;
		};
	}
}

./components/PrelineScript.tsx
change two lines:

  useEffect(() => {
    setTimeout(() => {
-     HSStaticMethods.autoInit();
+     window.HSStaticMethods.autoInit();
-   }, 100);
+   }, 300);
  }, [path]);

[koossaayy]

I can confirm this; using Livewire, and preline v2.0.2, but rolling back to v1.9.0 it works perfectly.

[umaraziz0]

Can confirm, JS features like tabs don't work properly in v2, it stops working on HMR or page navigation, hopefully a fix will come soon

[Sicria]

@umaraziz0 Check out #205 it has an approach that may work for you.

[billymosis]

Seems like it's the same story with Rails and Turbo. It works on initial page load but not after page is navigated.

hey @lenart have you find any way to solve this? its working only with turbo: false...

Just found myself and used other solutions as reference. Call Preline loaders into turbo:load event.

document.addEventListener("turbo:load", function(event) {
    HSAccordion.autoInit();
    HSDropdown.autoInit();
    HSOverlay.autoInit();
    HSSelect.autoInit();
});

and call it from your main application.js

Hi for anybody here and using HTMX and sent partial HTML from server we can use htmx load event like this

    document.addEventListener('htmx:load', function() {
    ....
    }

[mpspm]

Has anyone gotten HMR to work with Inertia + React? I looked at the Preline framework guide for React and it's slightly different due to how Inertia initializes a React app, which is like this:

// app.jsx
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
    return pages[`./Pages/${name}.jsx`]
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />)
  },
})

Trying to use useEffect and useLocation as recommended by the framework guide somewhere here won't work as this isn't a component function, and the App component sent to the render function doesn't appear to be an actual component file in my js directory, otherwise I'd try adding the hooks there. Any help is so greatly appreciated.

[hiteshjoshi]

#197 (comment)

[jaseemuddinn]

Seems like it's the same story with Rails and Turbo. It works on initial page load but not after page is navigated.

hey @lenart have you find any way to solve this? its working only with turbo: false...

Just found myself and used other solutions as reference. Call Preline loaders into turbo:load event.

document.addEventListener("turbo:load", function(event) {
    HSAccordion.autoInit();
    HSDropdown.autoInit();
    HSOverlay.autoInit();
    HSSelect.autoInit();
});

and call it from your main application.js

@ndrshnsn haven't had a chance to try it out myself but it seems like you should call HSStaticMethods.autoInit(); and don't have to deal with individual components. I'd probably put that code to turbo:visit dom event.

UPDATE: I did what I said above and it works.

Could you please share your file of app.jsx??

[ode96-dev]

I had the same issue. I resolved it by maintaining the guidelines...Preline maintains that: "projects_root_directory/app/components/PrelineScript.tsx", meaning the PrelineScript.tsx component must be housed within a components folder in the app directory.

[jaseemuddinn]

@ode96-dev thanks