pushing javascript codes at blade does not work out-CodePudding

I have a file called all.blade.php which goes like this:

@component('admin.layouts.content' , ['title' => 'example file'])
   @slot('breadcrumb')
        <li >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?

CodePudding user response：

Try Ctrl U to check if that component is rendered to its position. Also mention, If you are using Swal a JS library so did the actual Swallibrary code load before calling the fire() function.

Last please check the browser console option to identify if it was some JS error, not the blade.

CodePudding user response：

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 >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>