How can I re-initialize vanilla js codes whenever the page load #568

ahmadzissa · 2023-10-25T13:34:35Z

ahmadzissa
Oct 25, 2023

Laravel Version: 10.10
PHP Version: 8.1.6
Splade Version: 1.4.16

Description:

I purchased a theme from themeforst, and it uses vanilla js. The js works in the first-page load, but whenever I do any action like clicking on the nav bar or clicking on table pagination, it stops working because the js does not load again when the dom updates.

is there any way to load the js file each time the page loads ( dom change) just like vue js ?

from app.js
import "../css/app.css";
import "@protonemedia/laravel-splade/dist/style.css";
import "./app.css";
import './themejs.js' // this is the file I need to reload

jamesj2 · 2023-10-25T13:52:30Z

jamesj2
Oct 25, 2023

I don't know anything about themeforst but are you loading the app.js in the root.blade.php? That files stays in browser and doesn't get reloaded on partial page loads. Also, your routes need to use the Splade middleware.

0 replies

ahmadzissa · 2023-10-25T15:59:58Z

ahmadzissa
Oct 25, 2023
Author

I'm loading the theme.js file in resources/js/app.js file

 import "../css/app.css";
import "@protonemedia/laravel-splade/dist/style.css";
 import "./app.css";
 import './themejs.js'

 import VueApexCharts from 'vue-apexcharts' ;

 import { createApp } from "vue/dist/vue.esm-bundler.js";
import { renderSpladeApp, SpladePlugin } from "@protonemedia/laravel-splade";

const el = document.getElementById("app");

createApp({
    render: renderSpladeApp({ el })
})
    .use(SpladePlugin, {
        "max_keep_alive": 10,
        "transform_anchors": false,
        "progress_bar": true
    })
     .mount(el);

I'm using Splade middleware for all routes

Route::middleware(['splade'])->group(function () {

For Root file I have these codes

   @spladeHead
        @vite('resources/js/app.js')
    </head>
    <body class="font-sans antialiased">
        @splade
    </body>

is there any way to make it load with every action like vue js ?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How can I re-initialize vanilla js codes whenever the page load #568

{{title}}

Replies: 2 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How can I re-initialize vanilla js codes whenever the page load #568

ahmadzissa Oct 25, 2023

Replies: 2 comments

jamesj2 Oct 25, 2023

ahmadzissa Oct 25, 2023 Author

ahmadzissa
Oct 25, 2023

jamesj2
Oct 25, 2023

ahmadzissa
Oct 25, 2023
Author