Sep 28, 2020

Level 1

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

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.

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?
In this case, how is the content loaded, and the JS code in the @push directive not?

Any siggestions would be greatly appreciated - Thanks! :)

s4muel

5 years ago

Level 50

does clearing the view cache help ?

php artisan view:clear

Sinnbeck

5 years ago

Level 102

Never add assets with relative paths like that

 <script src="../../../assets/js/theme.js"></script> //big no no!
 <script src="{{asset('assets/js/theme.js')}}"></script> //using php to fix the problem

BrianA

5 years ago

Level 1

Hi @s4muel unfortunately that did not change anything, however, hitting the browser's refresh button/F5 always causes the JS to be included in the layout and in turn the table to be displayed correctly, as required.

What could be causing the page-content section to be included and the custom-scripts not?

Thanks, Brian

BrianA

5 years ago

Level 1

Hello @sinnbeck

Thanks for pointing that out for me.

I have just tried changing <script src="../../../assets/js/theme.js"></script> to <script src="{{assets('assets/js/theme.js')}}"></script> but got the following 500 error:

[2020-09-28 14:19:41] local.ERROR: Call to undefined function assets() (View: C:\xampp\htdocs\...

What could be causing this error please? Should the function assets() be defined somewhere in my project?

Thanks!

Sinnbeck

5 years ago

Level 102

Sorry typo. Should be asset() not assets()

1 like

BrianA

5 years ago

Level 1

@sinnbeck Was about to tell you that I solved the error - Thanks! :)

BrianA

5 years ago

Level 1

UPDATE:

After some debugging, I noticed that when clicking on menu href links/a-tags, the URL changes to the respective route URL, however, the page is not refreshed. It seems as if the layout is not loading again and only the 'title', 'page-subtitle', 'page-content' etc... sections are changing.

I am using a template (Basik - Web Application and Admin Template) - Could there be something in the template's scripts that is preventing the entire page from 'refreshing'/reloading?

When placing the same href link inside the @section('page-content') ... @endsection - i.e. inside the child blade view instead of the layout's menu, this solved the issue.
How can I check that the template is not preventing the following a-tag from acting as a regular href link please?

<div id="aside" class="page-sidenav no-shrink bg-light nav-dropdown fade" aria-hidden="true">
	<div class="sidenav h-100 modal-dialog bg-light">
		<div class="flex scrollable hover">
			<div class="nav-active-text-primary" data-nav>
				<ul class="nav bg">
					<ul class="nav-sub nav-mega">
						<li>
							<a href="/users" class="">
        							<span class="nav-text">View All</span>
       							</a>
      						</li>
					</ul>

Thanks, Brian

BrianA

5 years ago

Best Answer

Level 1

SOLVED:

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.

Brian :)

Please or to participate in this conversation.