Laravel - Scripts in @push Directive Not Available In Parent @stack Directive

BrianA12

Hi

I have a question about the @push and @stack directives.

My project has a parent view/layout named admin.blade.php and various child views, including one named datatable.blade.php. The second file is used to display a datatable with all users, and this datatable requires some JS script which is unique for this particular file (datatable.blade.php) and does not have to be included in other child blade view files.

• In my datatable.blade.php (the child view), I have the following:

@section('page-content')

... Here I have my page contect (the table which shows all the users registered, and other information) ... 
    
@endsection

{{-- @push directive in the child view, pushing content to the parent/master @stack directive --}}
@push('custom-scripts')
    <script>

    ... My custom JS script here (required by the datatable in the ```page-content``` section above ... 
       
        </script>
@endpush

• In my parent view/layout admin.blade.php, I included the following @stack directive:

...
    <!-- theme -->
        <script src="../../../assets/js/theme.js"></script>
        <script src="../../../assets/js/utils.js"></script>
        
    <script src="../../../libs/parsleyjs/dist/parsley.min.js"></script>
        
    {{-- Datatables - Always here as these are common for all datatables, then just add JS script in page-content                           section --}}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>

        @stack('custom-scripts')
        
     <!-- endbuild -->
    </body>
</html>

• However, when visiting the dashboard, my custom script code in not included in my layout admin.blade.php (parent), leading to missing JS code required by the datatable, which in turn causes the datatable to be displayed incorrectly.

• Upon refreshing the page from my browser, this custom-script JS code script loads as expected, and the code in included in the layout admin.blade.php (parent) - This was also confirmed from the browser's console.

1. Could it be that the original layout/parent without the custom-script is being cached, which causes the @stack directive to not get the required JS script?

2. In this case, how is the content loaded, and the JS code in the @push directive not?

Any siggestions would be greatly appreciated - Thanks!

allan

It sounds like a generic Laravel issue? You'd need to ask in a Laravel forum as I know next to nothing about how Laravel includes work I'm afraid.

Allan

BrianA12

Hi @allan,

thank you for your reply

After asking in other forums and contacting the author of the HTML layouts I am using for this project, disabling the pjax library and the ajax from the Laravel Blade layout solved the issue.

It was something related to the way different pages are loaded when the user navigates through the web application - Which was defined in the pjax and ajax scripts by the author of the templates being used.

Regards,
Brian