Načítanie scriptov v @layout.latte a default.latte

Andurit

Čaute
mám menší problém, s ktrým sa predpokladám stretol už nie jeden z vás. Mám hotový nejaký template HTML / CSS /JS, ktorý mám naprogramovať.

Nakoľko je veľká časť stránky rovnaká všade (obsiahle menu / info o užívateľovi / schéma rozlozenia …) väčšinu týchto vecí načítavam z @layout.latte.
Inak povedané moj layout.latte vyzerá nejako takto:

<HTML>
<HEAD>
..načitavam CSSka, meta tagy atd..
</HEAD>
<body>
Začiatok HTML ( HEADER, MENU, ....)
potom nasleduje:{include content}
a pod tým mám znova nejaké HTML ( typu footer)
a úplne na konci načítavám všetky JS
</body>

Na pár substránkach ale využívam knižnicu na vykreslovanie grafov. V zásade asi nič neobvyklé. Problém ale je, že pre tieto konkrétne stránky potrebujem načítať další JS:

<script src="http://code.highcharts.com/highcharts.js"></script>

a zároveň potrebujem načítať tesne pred ním JQUERY ktoré inak načítavam až na konci stránky.

Podarilo sa mi to trocha obísť tým že som napísal niečo také:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
							<script src="http://code.highcharts.com/highcharts.js"></script>
							<div id="graph_pie"></div>
							<script n:syntax="off">
							$(function () {
								$.noConflict();
							    $('#graph_pie').highcharts({
							        chart: {
							            plotBackgroundColor: null,
							            plotBorderWidth: null,
							            plotShadow: false
							        },
							        title: {
							            text: 'Browser market shares at a specific website, 2014'
							        },
							        tooltip: {
							            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
							        },
							        plotOptions: {
							            pie: {
							                allowPointSelect: true,
							                cursor: 'pointer',
							                dataLabels: {
							                    enabled: true,
							                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
							                    style: {
							                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
							                    }
							                }
							            }
							        },
							        series: [{
							            type: 'pie',
							            name: 'Browser share',
							            data: [
							                ['Firefox',   45.0],
							                ['IE',       26.8],
							                {
							                    name: 'Chrome',
							                    y: 12.8,
							                    sliced: true,
							                    selected: true
							                },
							                ['Safari',    8.5],
							                ['Opera',     6.2],
							                ['Others',   0.7]
							            ]
							        }]
							    });
							});
							</script>

Inak povedané, niekde v strede stranky volam potrebny JS + JQUERY a zároveň do môjho scriptu vkladám $.noConflict();. Je to ale značne neprehľadné.

Ako inak by som mohol donutit to JQUERY nech sa načíta na vybraných stránkach skôr (nechcem ho načítavať všade hneď na začiatku )

Pavel Kravčík

A proč nezkusíš počkat na načtení stránky s tímhle?

document.addEventListener("DOMContentLoaded", function(
	//kontrola jquery
	//tvůj kód
){});

Andurit

Určite máš pravdu, som ale trocha lame v JS, existuje na to nejaká iná cesta?

Pavel Kravčík

To nevím, jsem lama taky. :)

Editoval kzk_cz (17. 3. 2015 13:47)

Mysteria

Co takhle si udělat další blok s volitelným JS a ten umístit za to načítání jQuery?

<script src='./jQuery.js'></script>
{ifset anotherJS}{include anotherJS}{/ifset}

A pak prostě v těch šablonách, kde potřebuješ nějaký JS navíc, tak si tam kromě bloku content uděláš i anotherJS, kam to všechno JS navíc dáš a budeš to mít i pěkně na konci stránky a za jQuery?