laravel #include not working for section('script') - php

My yield or section or include is not working here is my code I think I already follow all the rules. As you can see I want to call the three.blade.php I name it as a #section('script') and call it to the master.blade.php using yield('script') but it seems the yield or section is not working. here are my codes below:
master.blade.php
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ asset('themes/css/bootstrap.rtl.min.css') }}" rel="stylesheet">
<link href="{{ asset('themes/css/bootstrap-select.css') }}" rel="stylesheet">
<link href="{{ asset('themes/fontawesome/css/all.min.css') }}" rel="stylesheet">
<link href="{{ asset('themes/css/style.css') }}" rel="stylesheet">
<link href="{{ asset('favicon.ico') }}" rel="shortcut icon" type="image/x-icon"/>
<title> كاربران</title>
</head>
<body>
#include('Home.layouts.sidebar')
<main id="app">
#include('Home.layouts.header')
#yield('content')
</main>
#include('Home.layouts.footer')
#yield('script')
</body>
</html>
index.blade.php
#include('Home.steps.one')
#include('Home.steps.two')
#include('Home.steps.three')
two.blade.php
<form action="{{ route('book.store') }}" method="post">
#csrf
....
</form>
<table class="table table-striped">
....
</table>
#section('script')
<script>
$(document).on('click', '#book_id', function() {
alert('Hello');
});
</script>
#endsection
three.blade.php
<form action="{{ route('requisition.store') }}" method="post">
#csrf
....
</form>
<table class="table table-striped">
....
</table>
#section('script')
<script>
$(document).on('click', '#province_id', function() {
alert('Hello');
});
</script>
#endsection


In index.blade.php
#extends('layouts.master')
#section('content')
#include('Home.steps.one')
#include('Home.steps.two')
#include('Home.steps.three')
#endsection
and for script and css you can use #stack.So in master.blade.php instead of
#yield('script')
use
#stack("script")
and in two.blade.php or any master extended layout use
#push('script')
<script>
</script>
#endpush


#John Lobo is correct, #stack and #push are definitely the way to go here. But there is also one other thing that might be going on here. Looks like you're trying to use jQuery, but I don't see it being imported anywhere.

Related

Im getting CSS and JS not found laravel 9 app

I'm trying to add a custom UI to my Laravel 9 app. So I'm adding extra CSS and JS files to my app.blade.php But looks like its not loading properly.
As you can see http://127.0.0.1:8000/css/tailwind.output.css and http://127.0.0.1:8000/js/init-alpine.js files not loaded. But when i check default http://127.0.0.1:8000/css/app.css file. Its working. But both of these files resides in the same location, which is resources/css/ and resources/js/ folders. Why those custom css and js files not loaded.
<!DOCTYPE html>
<html :class="{ 'theme-dark': dark }" x-data="data()" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('css/tailwind.output.css') }}">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"defer></script>
<script src="{{ asset('js/init-alpine.js') }}" defer></script>
#livewireStyles
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<x-jet-banner />
<div class="min-h-screen bg-gray-100">
#livewire('navigation-menu')
<!-- Page Heading -->
#if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
#endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
#stack('modals')
#livewireScripts
</body>
</html>
I'm using tailwind CSS, livewire, jetstream and Laravel 9

How to call local css file from blade template?

From main parent template I tried calling:
<link rel="stylesheet" href=<?=asset('css/admin_custom.css') ?> >
So all views that extends parent can use these styles but it doesn't work.
However if I put it in the child view, works perfectly.
Already tried using the {{ }} format, and adding type="text/css".
Also checked Including a css file in a blade template?
What is missing??
EDIT: more details...
I have this is the AdminLTE page template (page.blade.php):
#extends('adminlte::master')
#inject('layoutHelper', 'JeroenNoten\LaravelAdminLte\Helpers\LayoutHelper')
#if($layoutHelper->isLayoutTopnavEnabled())
#php( $def_container_class = 'container' )
#else
#php( $def_container_class = 'container-fluid' )
#endif
#section('includes')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/icheck-bootstrap/3.0.1/icheck-bootstrap.min.css" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css"/>
<link rel="stylesheet" href="{{ asset('css/admin_custom.css') }}">
#stop
#section('adminlte_css')
#stack('css')
#yield('css')
#stop
#section('classes_body', $layoutHelper->makeBodyClasses())
#section('body_data', $layoutHelper->makeBodyData())
#section('body')
<div class="wrapper">
{{-- Top Navbar --}}
#if($layoutHelper->isLayoutTopnavEnabled())
#include('adminlte::partials.navbar.navbar-layout-topnav')
#else
#include('adminlte::partials.navbar.navbar')
#endif
{{-- Left Main Sidebar --}}
#if(!$layoutHelper->isLayoutTopnavEnabled())
#include('adminlte::partials.sidebar.left-sidebar')
#endif
{{-- Content Wrapper --}}
<div class="content-wrapper {{ config('adminlte.classes_content_wrapper') ?? '' }}">
{{-- Content Header --}}
<div class="content-header">
<div class="{{ config('adminlte.classes_content_header') ?: $def_container_class }}">
#yield('content_header')
</div>
</div>
{{-- Main Content --}}
<div class="content">
<div class="{{ config('adminlte.classes_content') ?: $def_container_class }}">
#yield('content')
</div>
</div>
</div>
{{-- Footer --}}
#hasSection('footer')
#include('adminlte::partials.footer.footer')
#endif
{{-- Right Control Sidebar --}}
#if(config('adminlte.right_sidebar'))
#include('adminlte::partials.sidebar.right-sidebar')
#endif
</div>
#stop
#section('adminlte_js')
#stack('js')
#yield('js')
#stop
Then In the view I have #extends('adminlte::page')
And the bootstrap and datatables, etc. are working just fine, but my local styles file is not.
UPDATE: I paste here the HTML produced by the page. As I wrote if I put the in the 'css' section in view it produces this url, that works in the browser: http://localhost:5555/css/admin_custom.css
If I inspect the page I can see:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="4O2ogi54rggyd1ryKL0Isy8hlbjt5kELC61T">
<title>myTitle</title>
<link rel="stylesheet" href="http://localhost:5555/vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/adminlte/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<link rel="stylesheet" href="http://localhost:5555/css/admin_custom.css">
<link rel="shortcut icon" href="http://localhost:5555/favicons/favicon.ico">
<style></style></head>
Then, If I put it in the template it does not produces the same:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="4O2ogi54rggyd1ryKL0Isy8hlbjt5kELC61T">
<title>myTitle </title>
<link rel="stylesheet" href="http://localhost:5555/vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/adminlte/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<link rel="shortcut icon" href="http://localhost:5555/favicons/favicon.ico">
<style></style></head>

The styles for adminLTE templates wont work if written in page.blade.php, as previoulsly did:
EDIT: more details... I have this is the AdminLTE page template
(page.blade.php)
The styles have to be called in the master.blade.php so to be available for all pages. page.blade.php also extends from master, So: go to master.blade.php search for the {-- Base Stylesheets --}} section and put your code there like this:
{{-- Base Stylesheets --}}
#if(!config('adminlte.enabled_laravel_mix'))
<link rel="stylesheet" href="{{ asset('vendor/fontawesome-free/css/all.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
<link rel="stylesheet" href=<?=asset('css/admin_custom.css') ?> >
{{-- Configured Stylesheets --}}
#include('adminlte::plugins', ['type' => 'css'])
<link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/adminlte.min.css') }}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
#else
<link rel="stylesheet" href="{{ mix(config('adminlte.laravel_mix_css_path', 'css/app.css')) }}">
#endif
Note: This fix is for case you have not compile all your styles in app.css and AdminLTE main pages have been published as in this question.

As porloscerros Ψ wrote, you have to write it this way (in between <head> tags)
<link rel="stylesheet" href="{{ mix('css/admin_custom.css') }}">
And if it does not work, try:
<link rel="stylesheet" href="{{ asset('css/admin_custom.css') }}">

How to add OwlCarousel in laravel project?

Can not add OwlCarousel to laravel project properly and it doesn't work.
What should I do?
I copied owl.carousel.min.css and owl.theme.default.min.css and owl.carousel.min.js to owlcarousel folder that was placed in the same directory as view.blade.php file was.
My code is:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
</div>
<script>
$(document).ready(function () {
$(".owl-carousel").owlCarousel();
});
</script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>

The right way is this one:
<script type="text/javascript" src="{{ URL::asset('js/owl.min.js') }}"></script>
The function URL::asset() produces the necessary url for you. Same for the css:
<link rel="stylesheet" href="{{ URL::asset('css/owl.css') }}" />
You have to place owlcarousel folder in the laravel's app/public folder, not in views folder.
Hope this helps.

Laravel blade #section does not work

I built a Basic blade template inside
resources/views
,
Further I am using Vuetify.
it look like this:
//app.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', env('APP_NAME')) }}</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app" dark>
<v-app dark v-if="loading">
<v-layout row wrap align-center>
<v-flex class="text-xs-center">
<v-progress-circular :indeterminate="true" :size="80" color="primary"></v-progress-circular>
</v-flex>
</v-layout>
</v-app>
<v-app v-else v-cloak dark>
<v-navigation-drawer app right></v-navigation-drawer>
<v-toolbar app></v-toolbar>
<v-content>
<v-container grid-list-xl>
<v-layout>
#section('content')
</v-layout>
</v-container>
</v-content>
<v-footer app></v-footer>
</v-app>
</div>
<script src="{{ asset('js/app.js') }}" defer></script>
#yield('javascript')
</body>
</html>
I create a section
#section('content') so that I can extend the layout and put Content to that area. Inside
resources/views/Event
i have a blade file which extends this and shall add data to the Content
// create.blade.php
#extends('layouts.app')
#section('content')
testests
#endsection
But Nothing gets shown, what am I missing?

In you Blade template, you want to use
#yield('content')
not:
#section('content')

dropzone square not showing

I'm building an upload function (with laravel) to my webapp with dropzone. (dropzone.com).
But I don't see the upload square that should be there.
This is my main master.blade:
<html>
<head>
<title> #yield('title') </title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<link href="/css/roboto.min.css" rel="stylesheet">
<link href="/css/material.min.css" rel="stylesheet">
<link href="/css/ripples.min.css" rel="stylesheet">
<link href="/css/custom.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/dropzone.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
#include('standaard.navbar')
#yield('content')
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/js/dropzone.js"></script>
<script src="/js/ripples.min.js"></script>
<script src="/js/material.min.js"></script>
<script>
$(document).ready(function() {
// This command is used to initialize some elements and make them work properly
$.material.init();
});
</script>
</body>
</html>
And this is my dropzone page:
#extends('standaard.master')
#section('name', 'Uploadcenter')
#section('content')
<div class="container col-md-6 col-md-offset-3">
<div class="jumbotron">
<h1>UploadCenter</h1>
<p>Hier kunt u eenvoudig en snel bestanden met ons delen. U hoeft het er alleen maar in te slepen!</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
<div class="well well bs-component">
<div class="bs-component">
</div>
<form action="/{{ $user->id }}/files" method="post" class="dropzone" id="my-awesome-dropzone">
{!! csrf_field() !!}
</form>
</div>
</div>
#endsection
But I only see this:
What am I doing wrong?

Categories