javascript - Why emitted events of livewire is not triggered?

In laravel 7 learning livewire/livewire 1.3 I encountered that emitted events are not always triggered

I created component with command

php artisan make:livewire hostel/hostelsHomepageSpotlight

and simplifying the code I do not see alert of event. In app/Http/Livewire/Hostel/HostelsHomepageSpotlight.php :

<?php

namespace App\Http\Livewire\Hostel;

use Auth;
use DB;
use App\Config;

use App\Hostel;
use App\HostelImage;
use App\library\CheckValueType;
use App\Settings;
use Livewire\Component;

class HostelsHomepageSpotlight extends Component
{

    public function render()
    {

        $hostels     = [];
        $current_page= 1;
        $hostel_rows_count = Hostel
            ::getByStatus('A')
            ->count();

        $this->emit('hostelsHomepageSpotlightOpened', [ 'mode'=> 'hostels_homepage_spotlight', 'current_page'=>$current_page, 'hostel_rows_count'=>$hostel_rows_count ] ); // EMIT EVENT

        return view('livewire.hostel.hostels-homepage-spotlight', [
            'hostelsDataRows' => $hostels,
            'hostel_rows_count'=> $hostel_rows_count,
            'current_page'=> $current_page,
        ]);
    }
}

and in resources/views/livewire/hostel/hostels-homepage-spotlight.blade.php:

<div>
    
    <h1>hostelsHomepageSpotlightOpened</h1>

</div>   

<script>
    // If to uncomment line below I see  alert
    // alert( 'resources/views/livewire/hostel/hostels-homepage-spotlight.blade.php::' )
    window.livewire.on('hostelsHomepageSpotlightOpened', data => {
        // I DO NOT SEE ALERT BELOW ANYWAY
        alert( 'hostelsHomepageSpotlightOpened::' )
        console.log('facility_opened data::')
        console.log(data)
        // alertsInit(data.mode)
        // lazyImagesInit("img.lazy_image")
    })
</script>

Why event is not triggered ? Is there is a way to debug it ?

UPDATED # 2: I know the rule about wrapping div(without any class or styles definitions). Have I also to remove JS code ?

I tried to move all JS code in resources/js/app.js :

window.$ = window.jQuery = require('jquery');

require('./bootstrap');

var Turbolinks = require("turbolinks")
Turbolinks.start()

// If to uncomment the line below I see it
// alert( '::resources/js/app.js' )
window.livewire.on('hostelsHomepageSpotlightOpened', data => {
// I do not see this alert
    alert( 'hostelsHomepageSpotlightOpened::' )
    console.log('facility_opened data::')
    console.log(data)
    // alertsInit(data.mode)
    // lazyImagesInit("img.lazy_image")
})

and in my resources/views/layouts/app.blade.php :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" xmlns:livewire=";>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Laravel:Livewire</title>
    
    <!-- Fonts -->
    <link href=":200,600" rel="stylesheet">
    
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
    <link rel="icon" type="image/png" href="/favicon.ico"/>
    
    
    <link href="/css/app.css" rel="stylesheet">
    
    <script src="{{ asset('js/lazyload.js') }}"></script>   
    
    <!-- Styles -->
    @livewireStyles
    @livewireScripts
    
    <script src="{{ asset('/js/app.js') }}"></script>
    <script src="{{ asset('/js/app/app_funcs.js') }}"></script>

</head>
<body class="text-center">

<div class="flexbox-parent page_container " id="page_content">
    <header class="flexbox-item header">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
               ...
            </nav>

    </header>
    
    <main class="flexbox-item fill-area content flexbox-item-grow">
        @yield('content')
    </main>
    
    <footer class="flexbox-item footer  ml-3 mr-3">
        ...
        <p class="m-2">copyright_text</p>
    </footer>

</div>

</body>
</html>

And my code is nit triggered anywat! I suppose that is valid structure of my app as app.js AFTER @livewireStyles and @livewireScripts

UPDATED # 3:

I tried and that does not work. I have login form :

<article class="page_content_container">

   ...    
    <form class="form-login" wire:submit.prevent="submit">
        <input
            wire:model.lazy="form.email"
            name="email"
            id="email"
            class="form-control editable_field"
            placeholder="Your email address"
            autocomplete=off
        >
    </form>
   ...    
    
</article> <!-- page_content_container -->
{{--@push('scripts')--}}
    <script>
        $("#email").focus();
    </script>
{{--@endpush--}}

When @push/@endpush are commented as on lines above it works ok and focus is set to email input. But if to uncomment these 2 lines focus is not set.

I modified my resources/views/layouts/app.blade.php :

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Laravel:Livewire</title>
    
    <!-- Fonts -->
    <link href=":200,600" rel="stylesheet">
    
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
    <link rel="icon" type="image/png" href="/favicon.ico"/>
    
    
    <link href="/css/app.css" rel="stylesheet">
    
    
    <!-- Styles -->
    @livewireStyles
    

    <script src="{{ asset('/js/app.js') }}"></script>
    <script src="{{ asset('js/lazyload.js') }}"></script>
    <script src="/[email protected]/dist/alpine.min.js" defer></script>
    
    @livewireScripts
    @stack('scripts')
    
    
    <script src="{{ asset('/js/app/app_funcs.js') }}"></script>

app.js - is first as bootstrap and jquery are included there...

Thanks!

In laravel 7 learning livewire/livewire 1.3 I encountered that emitted events are not always triggered

I created component with command

php artisan make:livewire hostel/hostelsHomepageSpotlight

and simplifying the code I do not see alert of event. In app/Http/Livewire/Hostel/HostelsHomepageSpotlight.php :

<?php

namespace App\Http\Livewire\Hostel;

use Auth;
use DB;
use App\Config;

use App\Hostel;
use App\HostelImage;
use App\library\CheckValueType;
use App\Settings;
use Livewire\Component;

class HostelsHomepageSpotlight extends Component
{

    public function render()
    {

        $hostels     = [];
        $current_page= 1;
        $hostel_rows_count = Hostel
            ::getByStatus('A')
            ->count();

        $this->emit('hostelsHomepageSpotlightOpened', [ 'mode'=> 'hostels_homepage_spotlight', 'current_page'=>$current_page, 'hostel_rows_count'=>$hostel_rows_count ] ); // EMIT EVENT

        return view('livewire.hostel.hostels-homepage-spotlight', [
            'hostelsDataRows' => $hostels,
            'hostel_rows_count'=> $hostel_rows_count,
            'current_page'=> $current_page,
        ]);
    }
}

and in resources/views/livewire/hostel/hostels-homepage-spotlight.blade.php:

<div>
    
    <h1>hostelsHomepageSpotlightOpened</h1>

</div>   

<script>
    // If to uncomment line below I see  alert
    // alert( 'resources/views/livewire/hostel/hostels-homepage-spotlight.blade.php::' )
    window.livewire.on('hostelsHomepageSpotlightOpened', data => {
        // I DO NOT SEE ALERT BELOW ANYWAY
        alert( 'hostelsHomepageSpotlightOpened::' )
        console.log('facility_opened data::')
        console.log(data)
        // alertsInit(data.mode)
        // lazyImagesInit("img.lazy_image")
    })
</script>

Why event is not triggered ? Is there is a way to debug it ?

UPDATED # 2: I know the rule about wrapping div(without any class or styles definitions). Have I also to remove JS code ?

I tried to move all JS code in resources/js/app.js :

window.$ = window.jQuery = require('jquery');

require('./bootstrap');

var Turbolinks = require("turbolinks")
Turbolinks.start()

// If to uncomment the line below I see it
// alert( '::resources/js/app.js' )
window.livewire.on('hostelsHomepageSpotlightOpened', data => {
// I do not see this alert
    alert( 'hostelsHomepageSpotlightOpened::' )
    console.log('facility_opened data::')
    console.log(data)
    // alertsInit(data.mode)
    // lazyImagesInit("img.lazy_image")
})

and in my resources/views/layouts/app.blade.php :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" xmlns:livewire="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Laravel:Livewire</title>
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
    <link rel="icon" type="image/png" href="/favicon.ico"/>
    
    
    <link href="/css/app.css" rel="stylesheet">
    
    <script src="{{ asset('js/lazyload.js') }}"></script>   
    
    <!-- Styles -->
    @livewireStyles
    @livewireScripts
    
    <script src="{{ asset('/js/app.js') }}"></script>
    <script src="{{ asset('/js/app/app_funcs.js') }}"></script>

</head>
<body class="text-center">

<div class="flexbox-parent page_container " id="page_content">
    <header class="flexbox-item header">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
               ...
            </nav>

    </header>
    
    <main class="flexbox-item fill-area content flexbox-item-grow">
        @yield('content')
    </main>
    
    <footer class="flexbox-item footer  ml-3 mr-3">
        ...
        <p class="m-2">copyright_text</p>
    </footer>

</div>

</body>
</html>

And my code is nit triggered anywat! I suppose that is valid structure of my app as app.js AFTER @livewireStyles and @livewireScripts

UPDATED # 3:

I tried and that does not work. I have login form :

<article class="page_content_container">

   ...    
    <form class="form-login" wire:submit.prevent="submit">
        <input
            wire:model.lazy="form.email"
            name="email"
            id="email"
            class="form-control editable_field"
            placeholder="Your email address"
            autocomplete=off
        >
    </form>
   ...    
    
</article> <!-- page_content_container -->
{{--@push('scripts')--}}
    <script>
        $("#email").focus();
    </script>
{{--@endpush--}}

When @push/@endpush are commented as on lines above it works ok and focus is set to email input. But if to uncomment these 2 lines focus is not set.

I modified my resources/views/layouts/app.blade.php :

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Laravel:Livewire</title>
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
    <link rel="icon" type="image/png" href="/favicon.ico"/>
    
    
    <link href="/css/app.css" rel="stylesheet">
    
    
    <!-- Styles -->
    @livewireStyles
    

    <script src="{{ asset('/js/app.js') }}"></script>
    <script src="{{ asset('js/lazyload.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
    
    @livewireScripts
    @stack('scripts')
    
    
    <script src="{{ asset('/js/app/app_funcs.js') }}"></script>

app.js - is first as bootstrap and jquery are included there...

Thanks!

Share Improve this question edited Jul 29, 2020 at 10:11 asked Jul 26, 2020 at 5:13 mstdmstd 3,08121 gold badges86 silver badges184 bronze badges

Add a comment |

4 Answers 4

Sorted by: Reset to default 11

Livewire expects components wrapped by a div element.

Sample: < div> Your content... </ div>

What I am saying is that I am not sure you can include javascript in your Livewire blade. Try by moving it out to your app.js file and see if it works because the rest looks good.

I remember having trouble just because the blade’s first line was a html comment, instead of

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why emitted events of livewire is not triggered? - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)