Laravel Livewire: jQuery not working in child component loaded via @if statement

user_1645612 0
Viewed 1282

I'm using Laravel 8 and PHP 8 and livewire 2.

I have a Fullpage Livewire component. I have a button, to toggle a simple flag between false and true.

<Button wire:click="changeStatus"></Button>

In class of the Fullpage component:

public $showUpgradeForm;

public function mount()
{
    $this->showUpgradeForm = false;
}

public function changeStatus()
{
    $this->showUpgradeForm = true;
}

In view of Fullpage component:

@if($showUpgradeForm)
    <livewire:upgrade-form>
@else
    <p>show something else</p>
@endif

Everything is OK and the child component shows properly, but any jQuery codes will not work after this step, in whole of child and Master component.

Note: I've tried to load jQuery.js in Fullpage blade or in the child blade, nothings changed.

............................................ I tried a lot of ways to solve this problem. and finally i understood that on Fullpage components, i can't use @if statements for showing Forms which uses some jQuery statements like jquery validation and ... On this situation, because of refreshing whole of other DOM elements on the Fullpage component, those are working jQuery components will fail.

laravel-livewire laravel php jquery javascript
1 Answers

Emit from PHP component

$this->emit('your_event');

And catch on your blade to load js code

@section('script')
    <script>
        window.livewire.on('your_event', message => {
            alert('go');
            // your js code
        });
    </script>
@endsection
user_16142900
Related