pushing javascript codes at blade does not work out

Question

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?

Please check the console and let me know, It you get any error in browser console. — Sujith Sandeep, Jun 19 '22 at 09:20
@SujithSandeep No not working, the problem is something else. Like I said, I think there's must be a problem with the way I called the `@push` with `@component ` — japose7523, Jun 19 '22 at 09:47
Okay... I have answered below. Try that also and let me know... — Sujith Sandeep, Jun 19 '22 at 09:47
You can also mention when the script should be running... Like, `$(document).ready(function(){})`. — Sujith Sandeep, Jun 19 '22 at 09:52
@SujithSandeep If I put the js code in `master.blade.php` or even `content.blade.php`, **it will work** but I don't know why on earth it does not load in `all.blade.php` — japose7523, Jun 19 '22 at 09:54
Or else try using `@push('scripts')` after `@endslot`.i.e.., Inside `@component`. — Sujith Sandeep, Jun 19 '22 at 10:02
@SujithSandeep Finally it worked :). I put the `@stack` at the end body section of master blade and put the `@push .. @endpush` in all.blade.php after the `@slot` — japose7523, Jun 19 '22 at 10:38

Donkarnash · Accepted Answer · 2022-06-19T17:11:58.310

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>

score 0 · Answer 2 · answered Jun 19 '22 at 08:56

0

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.

answered Jun 19 '22 at 08:56

Hafijul Islam

24
1
5

If I cut and paste the js codes into head section of `master.blade.php` it will work out fine but now it does not load it at all! There's a problem with the way I'm calling the `@push` – japose7523 Jun 19 '22 at 09:03
In fact I don't want to load this js code in every file, just in the `all.blade.php` file – japose7523 Jun 19 '22 at 09:47

pushing javascript codes at blade does not work out

2 Answers2

Linked