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.
Related
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've a simple main layout:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
#yield('style')
</head>
<body>
#include('layouts.frontend.partials.slider')
#yield('javascript')
</body>
</html>
layouts.frontend.partials.slider
#section('style')
<link rel="stylesheet" type="text/css" href="mystyle.css">
#append
#section('javascript')
<script></script>
#append
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-swiper-autoplay="1000">Slide 1</div>
<div class="swiper-slide" data-swiper-autoplay="1000">Slide 2</div>
<div class="swiper-slide" data-swiper-autoplay="1000">Slide 3</div>
</div>
<div class="swiper-pagination"> </div>
<div class="swiper-button-prev"> </div>
<div class="swiper-button-next"> </div>
</div>
The #section('style') will be ignored while the #section('javascript') is working fine within the include file...
I've reduced both files (main and include) to a minimum and swapped the position of style and javascript without any difference
What seems to be working is to change to position from the #yield('style') to the body, like:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
#include('layouts.frontend.partials.slider')
#yield('javascript')
#yield('style')
</body>
Maybe it's not allowed to have #section in an include file?
What i want to archive is to have multiple partial includes with it's own css and javascript includes
Thanks
Here is another way to do, it's good because you have some flexibility.
You create a master template, put your main files
master.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="">
#section('css')
<!-- some master css here -->
#show
</head>
<body>
#section('navbar')
#include('common.navbar')
#show
#yield('content')
#include('common.footer')
#section('js')
<!-- some js here -->
#show
</body>
</html>
The others childs extends the master, you'll have all your layout and can customize what you want:
Child blade
#extends('master')
#section('css')
#parent
<!-- more css -->
#endsection
#section('navbar')
#parent
#endsection
#section('content')
<!-- Main content goes here -->
#endsection
#section('js')
<!-- replace js and add my own -->
<!-- others js -->
#endsection
Did you try extending your child blade file to use the master template?
At the top of layouts.frontend.partials.slider did you put #extends('layout.master') (or whatever the path to your master template is?)
It could be an issue caused by the order in which you are including files. Wouldn't a simpler solution be to have a #yield('slider') in your master template and simply wrap the slider content in #section('slider') and drop the #include...?
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 am trying to add a zoom on my image with the jQuery (brilliant) plugin gzoom (http://lab.gianiaz.com/jquery/gzoom/ or http://www.chouselive.co.za/demo/pictures/zoom/gzoom.php).
But it doesn't work. My image is just resized, but there is no zoom in it.
Here is my code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test gzoom</title>
<link rel="stylesheet" href="css/jquery-ui-1.7.1.custom.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/jquery.gzoom.css" type="text/css" media="screen">
<style>
div#zoom{
cursor: crosshair;
}
</style>
</head>
<body>
<div id="gzoomwrap">
<div id="zoom" class="zoom minizoompan">
<span class="loader">loading...</span>
<img src='img/myImage.png'/>
</div>
<!-- START gzoom zoom bar -->
<div class="ui-icon ui-icon-circle-minus gzoombutton"> </div>
<div class="gzoomSlider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="width: 258px;"></div>
<div class="ui-icon ui-icon-circle-plus gzoombutton"> </div>
<br style="clear:both">
<!-- END gzoom zoom bar -->
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- START gzoom dependencies -->
<script type="text/javascript" src="js/ui.core.min.js"></script>
<script type="text/javascript" src="js/ui.slider.min.js"></script>
<script type="text/javascript" src="js/jquery.gzoom.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$(function() {
$zoom = $("#zoom").gzoom({
sW: 300,
sH: 225,
lW: 1400,
lH: 1050,
lighbox : false
});
});
/*]]>*/
</script>
<!-- END gzoom dependencies -->
</body>
</html>
I looked on the Chrome console, and found some errors in the libraries. So I assume I didn't implement gzoom correctly. (Doesn't work in all browsers)
If you know what I'm doing wrong... I'll thank you a lot !
I'm the gzoom plugin author.
The plugin was developed a lot of time ago, but it's still working with new versions of jquery and jquery ui.
If you include a modern jquery version you have also to include a modern version of jquery-ui.
I've just tried the plugin with this versions and it does his job:
jquery-1.10.2.min.js
jquery-ui-1.10.3.custom.min.js
Include this files, and remove the ui.core.min from, and ui.slider.min.
Does anyone know of a jquery plugin that has a background slide show and a gallery that changes background images every time someone opens the site or every hour or so?
There are lot of jQuery slideshow plugins. I would recommend you to look at the following:
Slide JS - http://www.slidesjs.com/
<head>
<title>Title</title>
<style type="text/css" media="screen">
.slides_container {
width:570px;
height:270px;
}
.slides_container div {
width:570px;
height:270px;
display:block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slides.js"></script>
<script>
$(function(){
$("#slides").slides();
});
</script>
</head>
<body>
<div id="slides">
<div class="slides_container">
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
</div>
</div>
</body>
Also, check some good slideshow plugins here