Re-rendering blade file to force script tag to be executed? LIVEWIRE

[ocean ember]

Description

Im trying to achieve a fresh refresh of one of my blade files without having to refresh the component. I have tried setting up listeners and executing the $refresh directive but it doesn't completely refresh my component.

The reason i that i have a <script src=""/> tag that i want to be re-executed.

Relevant code

    <script>
        document.addEventListener('livewire:init', () => {
            Livewire.on('enable-script', (event) => {
                // TODO Rerender self to enable script again. 
            });
        });
...
...

I have tried:

• $refresh
• Injecting a script tag into the browser (very unsafe and didnt work)

I suspect there should be a straight forward way to do this?

[wintry loom]

What are you actually trying to achieve

Just re-running the methods within your script tags?

Keep in mind, "livewire:init" is going to run once Livewire initialises, it won't then subsequently run

There's quite a few options here. You could "push" the script into a stack in your "head", so Livewire will ignore it, and it'll stay initialised and listening

You could use AlpineJS listeners to interact

You could convert completely to AlpineJS

It depends what you're really trying to achieve

[ocean ember]

Hi! Thanks for answering 🙂

So, in short, what im trying to achieve is to render tinymce (a cloudbased text editor in the browser) based on a toggle boolean toggle switch.

Here are some pics of how is looks and whats happening. And you can see theres a toggle that can switch between two views.

When i switch view i get a plain text area because the script is not loaded in the dom i suspect. But if i refresh the browser and start on the editor view. The texteditor from tinymce is loaded properly.

[ocean ember]

@marsh fog

[civic niche]

Add a listener to the toggle and not the weirdness you're doing

[ocean ember]

@civic niche care to elaborate on the weirdness? Im always up for learning something new 🙂

[civic niche]

Removing and re-inserting a script tag is a strange approach. Try adding an event listener to the toggle which toggles the editor with javascript

Or have 2 routes. One with regular editor, the other with the script. Toggle goes to these 2 routes.

[ocean ember]

I agree on your statement. I shouldnt have to reapply the script if its already injected once into the dom upon refresh.

I have decided to remove the toggle completely though and rerender to another route with the only change being tinymce instead of the listview

[ocean ember]

Almost exactly what you suggested here