I have the following blade template:
<body>
<div id="app">
#extends('layouts._navbar')
<main class="py-4">
#yield('content')
</main>
</div>
</body>
Laravel first shows this:
<main class="py-4">
#yield('content')
</main>
And then:
#extends('layouts._navbar')
How do I to show the contents in the right order?
You have to use include instead of extends :
<body>
<div id="app">
#include('layouts._navbar')
<main class="py-4">
#yield('content')
</main>
</div>
</body>
Change the #extends('layout._navbar') to #include('layout._navbar').
Currently you're trying to push your blade file into the layout._navbar, instead of including it.
Laravel documentation on Blade Subviews
Your blade file will look like this after the edit:
<body>
<div id="app">
#include('layouts._navbar')
<main class="py-4">
#yield('content')
</main>
</div>
</body>
Related
I'm creating a new Laravel project (Laravel 7) and would like to use vue.js as frontend. I install it via laravel/ui.
The problem is Vue js doesn't seem to load and Vue Devtools showed vue.js not detected.
Here are the the blade file and app.js
blade file
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='shortcut icon' href='/images/favicon.ico'>
<link rel='stylesheet' href='/css/app.css'>
<title>Conference management</title>
</head>
<body>
<div id="app">
<section class="header">
<div class="level-left">
<div class="level-item">
<div>
<p class="title has-text-primary">Conference management</p>
</div>
</div>
</div>
<div class="level-right">
<a href="//www.cri.or.th" class="logo">
<img src="/images/cri_logo_s.png" alt="">
</a>
</div>
</section>
<section class="content">
<div class="container">
<div class="columns">
<div class="column"></div>
<div class="column is-half-table is-two-fifths-desktop">
include login
#{{ new Date }}
</div>
<div class="column"></div>
</div>
</div>
</section>
<footer class="footer">
<div class="content has-text-centered">
© #{{ year }} Organization
</div>
</footer>
</div>
<script type="text/javascript" src="/js/app.js">
</body>
</html>
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.config.devtools = true;
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
year: (new Date).getFullYear()
});
I ran npm run dev successfully and the css and js links are pointed to the correct file.
What could I be missing here?
Can you following this tutorial for your project : Link
Maybe you forget to install with npm vuejs.
Tell me if you have got again this problem :).
Here is the content of my home.blade.php file:
#extends('layouts.master')
#section('content')
#extends('partials.sidebar')
#section('pagecontent')
This is home
#endsection
#endsection
layouts/master.blade.php contains the main layout which has the typical <html><head><body>structure. In it's <body>, I am yielding to a section called content:
<!DOCTYPE html>
<html>
<body>
<div id="app">
#yield('content')
</div>
</body>
</html>
and in my parials/sidebar.blade.php, I am yielding to a section called pagecontent:
<div id="page-content-wrapper">
<div class="container-fluid">
#yield('pagecontent')
</div>
</div>
So I would naturally expect a DOM like this:
<!DOCTYPE html>
<html>
<body>
<div id="app"> <!-- #section('content') -->
<div id="page-content-wrapper">
<div class="container-fluid">
This is home <!-- #section('pagecontent') -->
</div>
</div>
</div>
</body>
</html>
Unfortunately, that's not the DOM my blade views are rendering. My sidebar partial doesn't get injected inside the master layout, instead, it is appended to the DOM as a sibling of the Entire Document:
<div id="page-content-wrapper">
<div class="container-fluid">
This is home <!-- #section('pagecontent') -->
</div>
</div>
<!DOCTYPE html>
<html>
<body>
<div id="app"> <!-- #section('content') -->
</div>
</body>
</html>
How can I fix this?
You can't use #extends like this. Use #include instead:
#include('partials.sidebar')
My issue is that when I define a section in a laravel blade (not master) I cannot display it's content on the page, however if I yield it on the master.blade.php it works fine. So how can I make this page display:
section 'content'
section 'template'
#extends('layouts.master')
#section('title', 'Website Builder')
#section('content')
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
#endsection
#section('template')
<div class= "container template_class ">
#foreach ($templates as $template)
<a class="content-link" href="{{ asset($template->file )}}">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
#endforeach
</div>
<div id="content-link2"></div>
<div class="container">
#yield('content')
#yield('template')
</div>
#endsection
#show
So, if you already have a #section defined in the master layout, it will be overriden unless you specify #parent inside the child layout's #section.
But for #yield, it always gets the section from the child layout. That means it always overrides the #yield part, even if it has a default defined as #yield('section', 'Default Content')
Hope this works!
I am having trouble rendering a view in my controller. I am currently running Laravel 4 and below is my code. (BTW, I am still learning Laravel particularly the latest version that has not been released yet. I find it a bad idea to learn from the older versions because there seems to be a lot of changes for the current one.)
controllers/PluginsController.php
class PluginsController extends BaseController {
public function index()
{
return View::make('plugins.index')->with(array('title'=>"The Index Page"));
}
views/plugins/index.blade.php
#layout('templates.master')
#section('header')
<h1>The Header</h1>
#endsection
#section('content')
testing the index.blade.php
#endsection
#section('footer')
<div style="background:blue;">
<h1>My Footer Goes Here</h1>
</div>
#endsection
views/templates/master.blade.php
<!doctype>
<html>
<head>
<meta charset="UTF-8" />
#yield('meta_info')
<title>{{$title}}</title>
#yield('scripts')
</head>
<body>
<div id="header">
#yield('header')
</div>
<div id="wrapper">
#yield('content')
</div>
<div id="footer">
#yield('footer')
</div>
</body>
</html>
you must use #extends instead of #layout, and #stop instead of #endsection
Using #extends instead of #layout solved my problem.
The following code snippet which includes an onClick event will
not work until I click reload on both the simulator and the phone.
The code is in an .erb file in an app model folder.
<section id="page1" data-role="page">
<header data-role="header">
<h1>CSS 3 Animations</h1>
</header>
<div data-role="content" class="content">
<p class="show-menu" onclick="ToggleText()">(Show/Hide) Menu</p>
<div class="sliding-menu slide out">Menu</div>
</div>
</section>
<script type="text/javascript">
function ToggleText() {
$(".sliding-menu").toggleClass("reverse out in");
}
</script>
I'm using rhomobile 3.2.1 with. Can someone explain why and what to do to
fix it?
Would something like this work?
http://jsfiddle.net/aJshm/3/
JS
$('.toggle-menu').click(function() {
$(".sliding-menu").toggleClass("reverse out in");
});
HTML
<section id="page1" data-role="page">
<header data-role="header">
<h1>CSS 3 Animations</h1>
</header>
<div data-role="content" class="content">
<p class="toggle-menu">(Show/Hide) Menu</p>
<div class="sliding-menu slide out">Menu</div>
</div>
</section>
Just a guess, try defining the function before it is invoked?