简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Unable to successfully execute JavaScript code within Blade
P粉476046165
P粉476046165 2024-02-25 18:05:56
0
2
414

I have a file called all.blade.php that looks like this: 

@component('admin.layouts.content' , ['title' => 'example file'])
   @slot('breadcrumb')
        <li class="breadcrumb-item active">Example File</li>
   @endslot
   ...
@endcomponent

@push('scripts')
    <script>
        Swal.fire({
            title: 'Do you want to save the changes?',
            showDenyButton: true,
            showCancelButton: true,
            confirmButtonText: 'Save',
            denyButtonText: `Don't save`,
        }).then((result) => {
            /* Read more about isConfirmed, isDenied below */
            if (result.isConfirmed) {
                Swal.fire('Saved!', '', 'success')
            } else if (result.isDenied) {
                Swal.fire('Changes are not saved', '', 'info')
            }
        })
    </script>
@endpush

This is content.blade.php:

@extends('admin.master')

@section('content')
   {{ $slot }}
@endsection

This is master.blade.php:

<!DOCTYPE html>
  <html>
     <head>
        ...
        @stack('scripts')
     </head>
     <body>
        @yield('content')
     </body>
   </html>

Now the problem is @push('scripts') ... @endpush doesn't work and doesn't show the sweet alert message.

So what’s the problem here? How can I solve this problem and call @component and @push together on blade?

P粉476046165
P粉476046165

reply all(2)
P粉681400307
P粉6814003072024-02-26 14:09:17 2 floor

Try Ctrl U Check if the component is rendered to its position. Also note that if you are using the Swallibrary JS library, the actual Swallibrary code is loaded before the fire() function is called.

Finally please check the browser console options to determine if it is some JS error and not a Blade error.

Like +0
Add Reply
P粉494151941
P粉4941519412024-02-26 12:58:45 1 floor

Replace the order of @push and @component

@push('scripts')
    
@endpush

@component('admin.layouts.content' , ['title' => 'example file'])
   @slot('breadcrumb')
  • Example File
    • @endslot ... @endcomponent

    Another option is to convert the main to a component

    

  
     
        ...
        {{ $scripts ?? '' }}
     
     
        {{ $slot }}

    and convert content into components

    

    
       {{ $scripts ?? '' }}
    
    {{ $slot }}

    Then you can write all.blade.php as 

    
    
        
    
    
    All
    Like +0
    Add Reply
    Popular Topics
    More>
    Popular Articles
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn：Public welfare online PHP training，Help PHP learners grow quickly！