We can use a section to define some HTML and then yield that somewhere else.
So why do we have stacks? https://laravel.com/docs/5.2/blade#stacks
It's doing exactly the same thing with different keywords, but has fewer options (No inheritance).
#push('scripts')
<script src="/example.js"></script>
#endpush
<head>
<!-- Head Contents -->
#stack('scripts')
</head>
Can be done with section:
#section('scripts')
<script src="/example.js"></script>
#endsection
<head>
<!-- Head Contents -->
#yield('scripts')
</head>
I might be mistaken, but the difference is not only semantically, but in behaviour as well.
With #push you append as many times as needed to a stack, while (by default) you may fill #section only once in your views.
In some situations this comes in handy when you need to add content from different locations across your template files or in loops:
index.blade.php:
#extends('master')
...
#for ($i = 0; $i < 3; $i++)
#push('test-push')
<script type="text/javascript">
// Push {{ $i }}
</script>
#endpush
#section('test-section')
<script type="text/javascript">
// Section {{ $i }}
</script>
#endsection
#endfor
master.blade.php
#stack('test-push')
#yield('test-section')
</body>
result:
<script type="text/javascript">
// Push 0
</script>
<script type="text/javascript">
// Push 1
</script>
<script type="text/javascript">
// Push 2
</script>
<script type="text/javascript">
// Section 0
</script>
</body>
Stack is someway appropriate for scripts , with stack you can Append as much as you need .
#push('scripts')
<script src="/example.js"></script>
#endpush
Append …
<script>
#stack('scripts')
</script>
As you can see the script's stack will be appended under the script tag of example js. So you can push special scripts for each view.
#section - You can add your js css once.
#stack - Push js, aand css into stack (page) many times.
Related
I have in my application a lot of generated reports with html tables, now I implemented with vuejs diagrams. But I can't get them rendered because they are in javacript.
$view = view('reports.single.print', ['stats' => $stats]);
$html = $view->render();
In normal browser mode everything is fine, but I need to get rendered html for print mode.
I tried with moving from bottom to <head>
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}"></script>
but nothing changes.
My blade looks like:
<body>
#include('header')
HTML TABLE CONTENT
<diagram></diagram>
#include('footer')
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}">
</body>
Can I render somehow also javascript with render() method?
I think you should try adding a closing tag (</script>).
Replace:
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}">
with the following:
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}"></script>
See if you can find an alternative to this. I have a #stack('header_scripts') and I want to render from there multiple scripts like <scripts></scripts> in my website.
For example, this is my master_page.blade.php:
<head>
#stack('header_scripts)
</head>
And this is my index.blade.php:
<div class="promotion">
-45% DISCOUNT!
#push('header_scripts')
<script>
//show promotion and send data to Google Anlytics from here
</script>
#endpush
</div>
<div class="container>
//some products list here
#push('header_scripts')
<script>
//show all the products and send data to Google Anlytics
</script>
#endpush
</div>
Etc, etc.
The problem is that the last push to the stack overwrites the first push code.
How can I do this?
<head>
#stack('css')
</head>
<body>
#stack('js')
</body>
#extends('layouts.admin.app')
#section('title','Tag')
#push('css')
<link href="{{ asset('admin/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css') }}" rel="stylesheet">
#endpush
#section('content')
#endsection
#push('js')
<script src="{{ asset('admin/plugins/jquery-datatable/jquery.dataTables.js') }}"></script>
#endpush
I am trying to request a service via iron-ajax using the following in my index.html:
<body class="fullbleed">
<template is="dom-bind" id="mainTemplate">
<paper-material class="todo" elevation="1">
<span>Mohammed</span>
</paper-material>
<br/>
<iron-ajax id="requestGeoname" auto url="http://api.geonames.org/findNearbyPlaceNameJSON" params='{{input}}' handle-as="json" last-response="{{data}}"></iron-ajax>
<span>{{data.geonames.0.countryName}}</span>
<br/>
<span>{{data.geonames.0.name}}</span>
</template>
<p id="geolocation">Finding geolocation...</p>
</body>
In my JS code, I would like to read {{data}} but could not do it. I tried to do it using the following:
<script type="text/javascript" charset="utf-8">
...
console.log(document.querySelector('#requestGeoname').data);
...
</script>
The code gives me undefined when I log {{data}}.
This should work:
<script type="text/javascript" charset="utf-8">
...
var template = Polymer.dom(this).querySelector('template[is=dom-bind]');
console.log(template.data);
...
</script>
As Dogs pointed out, the data property doesn't belong to requestGeoname-element, it belongs to the "template" item that is binded with dom-bind. Dogs solution should also work, but if you have other variables to use in your application, this is probably the better solution since they are now accesible through the template-object. For example:
...
template.myOthervariable = "derpherp";
...
You have to wait until the request is finished. It's better to use the event response (More info: https://elements.polymer-project.org/elements/iron-ajax#response).
<script>
document.getElementById('requestGeoname').addEventListener('response', function(event){
console.log(event.detail.response)
});
</script>
or declaratively:
<script>
var mainTemplate = document.getElementById('mainTemplate');
mainTemplate.onPlacesResponse = function(event){
console.log(event.detail.response);
};
</script>
<iron-ajax … on-response="onPlacesResponse"
I am using laravel 4 for a project. Is there any way I can specify what js files I want to load for a certain view. Right now I am lumping all in one file.
When I use codeigniter, to load specific js files, i use a library to generate the script tags and echo them at the footer. something as below
$this->data['js'] = $this->js_lib->generate('jquery');
Then in my view
<?= $js ?>
Any idea how to do this in laravel?
Main Layout
main.blade.php
#include('includes.header')
<body>
<!-- main content -->
<div id="main_wrapper">
<div class="page_content">
#yield('content')
</div>
</div>
#include('includes.footer')
</body>
header.blade.php
<head>
<meta charset="UTF-8">
<title>My Page</title>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!-- common styles -->
<link rel="stylesheet" href="{{ asset('assets/bootstrap.css') }}">
<!-- page specific styles -->
#yield('pagespecificstyles')
</head>
footer.blade.php
<footer>
<!-- common scripts -->
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<!-- page specific scripts -->
#yield('pagespecificscripts')
mypage.blade.php
#extends('layouts.main')
#section('pagespecificstyles')
<!-- flot charts css-->
<link rel="stylesheet" href="{{ asset('assets/lib/owl-carousel/flot.css') }}">
#stop
#section('content')
<div class="container">
Hello welcome to my page.
</div>
#endsection
#section('pagespecificscripts')
<!-- flot charts scripts-->
<script src="{{ asset('/assets/lib/flot/jquery.flot.min.js') }}"></script>
#stop
Stacks
Blade allows you to push to named stacks which can be rendered somewhere else in another view or layout. This can be particularly useful for specifying any JavaScript libraries required by your child views:
#push('scripts')
<script src="/example.js"></script>
#endpush
You may push to a stack as many times as needed. To render the complete stack contents, pass the name of the stack to the #stack directive:
<!-- Component Contents -->
#stack('scripts')
</body>
https://laravel.com/docs/5.7/blade#stacks
I know asked a while ago but for the benefit of others who may stumble here! One option is also in your layout to define additional sections, e.g.
#yield('css') <!-- In the head -->
#yield('js') <!-- Before the </body> tag -->
Then in your views
#extends('some.layout')
#section('css')
#include('js/dependencies/some/js/dependency/css.css')
#append
<!-- So in case these dependencies are used elsewhere you're not repeating your script or link tags over and over -->
#section('js')
#include('js/dependencies/some/js/dependency/js.js')
#include('js/dependencies/some/js/dependency/js2.js')
#append
#section('content')
Your actual content
#endsection
Just have a 'partials' view folder - and include whatever script you want in each view.
So in your view;
<body>
// Your main content here
// Other JS files you want in all views
#include('partials.analytics.blade.php')
#include('partials.googlemaps')
#include('partials.some_other_js_file')
</body>
Then have /views/partials/analytics.blade.php
<script>
// Your JS analytics script here
</script>
and just repeat for each 'script'
You may add the following code in your app.blade file
#stack('scripts')
and then you can use the jquery on page
#push('scripts')
<script type="text/javascript">
///Js code
</script>
#endpush
I used mootools scrollable(http://mootools.net/forge/p/scrollable) on my page,but it is not working.
my page: http://neyriz.net/moo/
I used it for div with id="right"
why it's not work?
You are making 2 mistakes. The first is that you try to instanciate the Scrollable before the DOM is ready and so your element doesn't exist. So you have to move your script tag either to the end of the body or you wrap it in an event listener. I.E:
window.addEvent('domready', function() {
var myScrollable = new Scrollable($('right'));
});
The second problem is that the plugin has some dependencies. In this case you need to include Slider, Element.Measure, Element.Shortcuts from MooTools more. You can go to http://mootools.net/more/ and select those 3 modules. Download the file and include it into your head between mootools-core and scrollable:
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script> INSERT MOOTOOLS MORE HERE!
<script type="text/javascript" src="scrollable.js"></script>
In general it's better when you define and load your JS files before the body. So it looks like:
<html>
<head><title>My awesome page</title></head>
<body>
<h1>My awesome page</h1>
<p>Some text</p>
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script> INSERT MOOTOOLS MORE HERE!
<script type="text/javascript" src="scrollable.js"></script>
</body>
</html>