phplaravellaravel-8laravel-components

pushing javascript codes at blade does not work out

I have a file called all.blade.php which goes 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

And here is content.blade.php:

@extends('admin.master')

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

And this is master.blade.php:

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

Now the problem is @push('scripts') ... @endpush does not work out and not showing the sweet alert message.

So what's going wrong here? How can I solve this issue and call the @component and @push together at a blade?

Solution

  • Swap the order of @push and @component

    @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

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

    Another option would be to convert the master into component

    <!-- resources/views/components/admin/master.blade.php -->
<!DOCTYPE html>
  <html>
     <head>
        ...
        {{ $scripts ?? '' }}
     </head>
     <body>
        {{ $slot }}
     </body>
   </html>

    And convert content into a component

    <!-- resources/views/components/admin/layouts/content.blade.php -->
<x-admin.master>
    <x-slot:scripts>
       {{ $scripts ?? '' }}
    </x-slot>
    {{ $slot }}

   <!-- Any other slots etc -->
</x-admin.master>

    Then you can write the all.blade.php as

    <x-admin.layouts.content>
    <x-slot: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>
    </x-slot>
    <h1>All</h1>
</x-admin.layouts.content>