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
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>
So basically I have this code where I click on the image, it gets html file and should display it on the same page. It does display it but on another page, my guess is that it's not actually loading js file for some reason. Anyone can help?
View:
#extends('layouts.master')
#section('title', 'Best programmer ever')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{{asset('/js/template.js')}}" rel="javascript" type="text/javascript"></script>
#section('content')
#endsection
#section('template')
<!-- #foreach ($templates as $template)
{{$template->image}}
{{$template->file}}
#endforeach
-->
<div class= "template_class">
<a class="content-link" href="templates/template1.html">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
</div>
#show
JavaScript:
$(function(){
$('.content-link').click(function(e){
e.preventDefault();
$('.content').load(this.href)
.fail(function()( alert('Oops...something went wrong')));
});
});
alert("hello");
It doesn't even show alert so that's why I think it is not loading it.
The <script> tags are out of the #section sections.
Try changing it like this:
#section('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{{asset('/js/template.js')}}" rel="javascript" type="text/javascript"></script>
#endsection
If it doesn't work, check if the JS files are really included in your browser. (Open the Chrome Dev Tools and check the DOM)
I have a fresh install of Laravel passport inside of an existing Laravel 5.3 project of mine.
EDIT: I have now realised that any Vue components (even the default example component) show as fragments if i try and import them.
I am trying to import the Vue components into my application however when I do so, Vue debug tool in chrome is telling me that the elements are fragments.
Looking at the source of the page, it doesn't mention them, so im guessing that the components are being registered into the page correctly
I have been looking around and have found that most places referencing this error in vue are caused by the vue components not being wrapped in a div that roots to an element in the page however the same components have worked in a fresh install.
What should i be looking for to find the problem with this?
Here is my master layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
#include('includes.title')
<!--Baked in styles -->
#include('includes.styles')
<!-- Theme Custom styles -->
<link href="{{ asset('/css/custom.css') }}" rel="stylesheet">
{{--Fonts and icons--}}
<!-- Scripts -->
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
#yield('css')
</head>
<body>
#include('includes.navbar')
#yield('content')
<!-- Scripts -->
{{--Core ecomplete JS--}}
<script type="text/javascript" src="{{ asset('js/all.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui.custom.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/bootstrap.js') }}"></script>
{{--End core ecomplete JS--}}
<script type="text/javascript" src="{{ asset('js/sweetalert.min.js') }}"></script>
#yield('js')
<!-- Plugins -->
<script src="{{ asset('js/gsdk-checkbox.js') }}"></script>
<script src="{{ asset('js/bootstrap-select.js') }}"></script>
<!-- End Plugins -->
<!-- GSDK JS -->
<script src="{{ asset('js/get-shit-done.js') }}"></script>
#include('sweet::alert')
</body>
</html>
Here is the code for my app.js
Vue.component('example', require('./components/Example.vue'));
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue')
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue')
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue')
);
const app = new Vue({
el: 'body'
});
Here is the code for my api.blade.php
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8">
<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-access-tokens>
</div>
</div>
</div>
#endsection
I call it from a simple route closure.
Web.php
Route::get('api', function(){
return view('api');
});
I am trying to use Turbolinks with my Laravel 5.2 application, there are some js errors, considering that some pages need extra JS. I can't figure out how to load the page specific JS what to load first(in the head section or after the content section ???)
here's my current master layout:
<!DOCTYPE html>
<html>
<head>
<title>#yield('title')</title>
<!-- Load CSS -->
#include('assets.css')
<!-------------->
<!-- Load jQuery -->
<script src="{{ URL::asset('js/jquery-2.1.4.min.js')}}"></script>
<script src="{{URL::asset('js/jquery.turbolinks.min.js')}}"></script>
<script src="{{URL::asset('js/jquery.address.js')}}"></script>
#yield('head')
<script src="{{ URL::asset('js/turbolinks.js')}}"></script>
<!----------------->
</head>
<body>
<!-- Load Navbar -->
#include('elements.html.navbartop')
<!----------------->
<div class="pusher">
<div id="content" class="ui main container" style="margin: 85px 0 50px 0">
<!-- Load Content -->
#yield('content')
<!------------------>
</div>
</div>
<!-- Load Footer -->
#include('elements.html.footer')
<!----------------->
<!---->
<script src="{{ URL::asset('js/semantic.min.js')}}"></script>
<!--------------------->
<script>
#include('ajax.search') // searchbar ajax
</script>
</body>
</html>
now a different page:
#extends('layout.master')
#section('title', 'Dashboard')
#section('head')
<script>
$(document).ready(function () {
$('element').dowhatever;
});
</script>
#endsection
#section('content')
....
#endsection
Instead of using $(document).ready event, you should use the turbolinks load event like this:
document.addEventListener("turbolinks:load", function() {
$('element').dowhatever;
});
Also you need to understand the way that Turbolinks 5 works, because load and evaluate any script on the initial page load and then append to the current head element.
I do recommend and advise calling JS scripts at the bottom of your page, your file should look like that:
<html>
<head>
<title>#yield('title')</title>
<!-- Load CSS -->
#include('assets.css')
<!-------------->
</head>
<body>
<!-- Load Navbar -->
#include('elements.html.navbartop')
<!----------------->
<div class="pusher">
<div id="content" class="ui main container" style="margin: 85px 0 50px 0">
<!-- Load Content -->
#yield('content')
<!------------------>
</div>
</div>
<!-- Load Footer -->
#include('elements.html.footer')
<!----------------->
<!---->
<!-- Load jQuery -->
<script src="{{ URL::asset('js/jquery-2.1.4.min.js')}}"></script>
<script src="{{ URL::asset('js/semantic.min.js')}}"></script>
<script src="{{URL::asset('js/jquery.turbolinks.min.js')}}"></script>
<script src="{{URL::asset('js/jquery.address.js')}}"></script>
#yield('head')
<script src="{{ URL::asset('js/turbolinks.js')}}"></script>
<!----------------->
<!--------------------->
<script>
#include('ajax.search') // searchbar ajax
</script>
</body>
</html>
Also load Semantics before Turbolinks.
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