I have a base layout which contains following:
#section('javascripts')
<script src="<?php echo asset('js/all.js') ?>"></script>
#endsection
In my child template I have following:
#extends('layouts.master')
<!-- some other html code -->
#section('javascripts')
#parent
<!-- some local scripts -->
<script>
$(function() { console.log('test'); });
</script>
#endsection
My javascripts from both parent and child are not loading at all.
However, following works:
Base layout:
<!-- load main scripts -->
<script src="<?php echo asset('js/all.js') ?>"></script>
#yield('javascripts')
Child template:
#extends('layouts.master')
<!-- some other html code -->
#section('javascripts')
<!-- some local scripts -->
<script>
$(function() { console.log('test'); });
</script>
#endsection
It's true that you can use stacks but for your question, you are not closing the section correctly. Instead of #endsection you have to use #show at your base layout.
#section('javascripts')
<script src="<?php echo asset('js/all.js') ?>"></script>
#show
You can better use the #stack and #push structures here I think. This would look like this
In your parent template you can add a #stack tag where you would like to see your javascript code like this
<head>
<title>My website</title>
#stack('scripts')
</head>
Then in your child template you will use the #push tag it will look like this.
#push('scripts')
<script>
$(function() { console.log('test'); });
</script>
#endpush
This will push your javascript from the child template to the stack of the parent template in.
I found a topic on laracasts where it is explained.
https://laracasts.com/discuss/channels/general-discussion/blade-push-and-stack-are-they-here-to-stay
Related
I am trying to use tablesorter.js with DocPad. I have added the required lines to docpad.coffee to load the css and js for the tablesorter, and I have added the call to tablesorter() in the page where I have the the table I want to sort.
However, the resulting tables do not sort properly for two reasons: All scripts are deferred (defer="defer") and the call to tablesorter() appears before the scripts are loaded, like this:
</tbody></table></p>
<script>
$(document).ready(function(){$("#mytable").tablesorter();})
</script></div>
</article>
...
<!-- Scripts -->
<script defer="defer" src="/vendor/jquery/1.10.2/jquery.min.js"></script>
<script defer="defer" src="/vendor/jquery/tablesorter/jquery.tablesorter.js"></script>
<script defer="defer" src="/vendor/modernizr/2.6.2/modernizr.min.js"></script>
<script defer="defer" src="/vendor/twitter-bootstrap/dist/js/bootstrap.min.js"></script>
<script defer="defer" src="/scripts/script.js"></script>
</body>
If I delete the defer stuff and move the tablesorter() call down, it works fine:
<!-- Scripts -->
<script src="/vendor/jquery/1.10.2/jquery.min.js"></script>
<script src="/vendor/jquery/tablesorter/jquery.tablesorter.js"></script>
<script src="/vendor/modernizr/2.6.2/modernizr.min.js"></script>
<script src="/vendor/twitter-bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/scripts/script.js"></script>
<script>
$(document).ready(function(){$("#mytable").tablesorter();})
</script>
</body>
I need to get rid of the defer setting and I need to call tablesorter() after the scripts have been loaded. How can I do this in DocPad 6.59.6?
I found a fix and a workaround to get tablesorter working.
The sequence issue: In order to load all Javascript before the call
to tablesorter(), I moved the scripts section in the default layout
(src/layouts/default.html.eco) to be loaded as part of the <head/>,
not as the lats part of the <body/> as it originally was.
The defer issue: I couldn't figure out how to modify Docpad's
#getBlock('scripts') to not include the defer="defer" setting.
The workaround was then to not use getBlock and instead just
hardcode the references to the script files.
In summary, going from this:
<html>
...
<body>
...
<%- #getBlock('scripts')...
</body>
</html>
to this:
<html>
<head>
...
<script src="/vendor/jquery/...
...
</head>
<body>
...
</body>
</html>
fixed the problem. I now have a maintenance problem that I have to maintain the list of scripts within the layout (instead of using the scripts: section in docpad.coffee); I can live with that.
I see some others (e.g. this post) have had trouble using external javascript scripts in JQuery Mobile - as of today I have joined their ranks.
I have a single external js script (controllers.js) which contains code that affects several pages on the site. It is loaded on every page of the site. I put the js file just before the tag it works fine on the initial page load. However when I navigate thereafter (using the JQM Ajax methods) all functions in the script stop working. I would have thought the script would remain in cache - but heyho. Anyhow there's an FAQ which answers this question and I've implemented their suggestion which is: "...to reference the same set of stylesheets and scripts in the head of every page." I have done this but when I do even on the first page load the js doesn't fire. There aren't page specific scripts - so the remainder of that FAQ does not apply.
My cut down html looks like this:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="/static/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/jquery-mobile/css/themes/default/jquery.mobile-1.3.2.min.css">
<script src="/static/jquery-1.9.1.min.js"></script>
<script src="/static/jquery-ui/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/static/jquery-mobile/js/jquery.mobile-1.3.2.min.js"></script>
<!-- CSS: implied media="all" -->
</head>
<body>
<div data-role="page" id = "main-page">
<div data-role="header" style="overflow:hidden;">
</div>
<div id = "home" data-role="content">
<input type ='button' id = "some_btn" value="press me">
</div>
</div>
<script type="text/javascript" src="/static/js/controllers.js"></script>
</body>
</html>
and within the javascript file
controllers.js
$('#some_btn').click(function()
{
alert('button pressed');
});
Any ideas on what I may be doing wrong here?
Since the content in the #page is loaded dynamically via ajax, click will not work, since it only works on elements that are on the page when the script is called.
You need to use the .on() method:
$('body').on('click','#some_btn',function()
{
alert('button pressed');
});
I want to include a javascript reference like:
<script src="#Url.Content("~/Scripts/jqueryFoo.js")" type="text/javascript"></script>
If I have a Razor View, what is the proper way to include this without having to add it to the Layout (I only need it in a single specific View, not all of them)
In aspx, we could use content place holders.. I found older examples using aspx in mvc but not Razor view..
Depending how you want to implement it (if there was a specific location you wanted the scripts) you could implement a #section within your _Layout which would enable you to add additional scripts from the view itself, while still retaining structure. e.g.
_Layout
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
#RenderSection("Scripts",false/*required*/)
</head>
<body>
#RenderBody()
</body>
</html>
View
#model MyNamespace.ViewModels.WhateverViewModel
#section Scripts
{
<script src="#Url.Content("~/Scripts/jqueryFoo.js")"></script>
}
Otherwise, what you have is fine. If you don't mind it being "inline" with the view that was output, you can place the <script> declaration within the view.
If you are using Razor view engine then edit the _Layout.cshtml file. Move the #Scripts.Render("~/bundles/jquery") present in footer to the header section and write the javascript / jquery code as you want:
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(document).ready(function () {
var divLength = $('div').length;
alert(divLength);
});
</script>
You can add the script tags like how we use in the asp.net while doing client side validations like below.
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<script type="text/javascript" src="~/Scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
//Your code
});
</script>
You should add datatable.js script on defer="defer"
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js" defer="defer"></script>
I am using the method noted here in the docs to set data-ajax="false" on a parent container for my site but I do have a few cases where I want the page to load via Ajax.
Is there a way to set the default on the parent container but allow individual links to override that setting? Adding data-ajax="true" to the individual links doesn't seem to work.
To set default for full page load:
$(document).on("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
To set individual, use data-ajax=true.
Somehow other suggestions didn't work for me. But this one did work. Tested.
This script disables all ajax links in the page jquery mobile - and those that should be ajax ones can be used as the a-link below with data-ajax=true.
<head>
<!-- ..... -->
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).on("mobileinit", function () {
// Reference: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html
$.extend($.mobile, {
linkBindingEnabled: false,
ajaxEnabled: false
});
});
</script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<!-- ..... -->
</head>
<body>
<a href="holysmokewheredidtheajaxgo.html" data-ajax=true>Well, I'm still ajax. That's true!</a>
</body>
I've been trying to get a script that inserts a div of text after the first and second paragraph of an article to work in jQueryMobile. It works on the first pageload, but on the second it loads the content twice, and the third time it's loaded three times, and so on.
The jQueryMobile libraries and my script is loaded in the head:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="myscript.js">
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
Then I have
<body id="mobile">
<div id="wrapper" data-role="page">
And then the content of the page
My script is executed as documented on jquerymobile.com
$("#wrapper").live('pageinit', function() {
Am I missing something? Any help will be deeply appreciated.
try adding data-dom-cache="false" it should look like this
<body id="mobile">
<div id="wrapper" data-role="page" data-dom-cache="false">
As Clarence commented, a better solution is to move the <script> tag outside of the <div> with data-role="page"
<body id="mobile">
<div id="wrapper" data-role="page">
<!-- stuff -->
</div>
<script>
$("#wrapper").live('pageinit', function() {
// more stuff
});
</script>
</body>