i have a web project. The project is based on Smarty templates.
I have a base.tpl with the common structure, for all pages of my site.
The base.tpl have the next line, thats includes the template requested by the user:
{include file="{$request}"}
For example. When the user request http://mydomain/contact, $request have "contact.tpl" value.
And the bottom of base template have the inclusion of the commons js files:
{block name="javascript"}
<script src="{$BASE_URL}/assets/js/libs/jquery-1.10.2.min.js"></script>
<script src="{$BASE_URL}/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="{$BASE_URL}/assets/js/common.js"></script>
{/block}
So, any templates requested by the user, requires the inclusion of mores javascript files, that i like insert in the "javascript" block.
I try, for example in the contact.tpl the next code:
{block name="javascript" prepend}
<script src="{$BASE_URL}/assets/js/libs/validation/jquery.validate.js"></script>
<script src="{$BASE_URL}/assets/js/libs/validation/localization/messages_es.js"></script>
<script src="{$BASE_URL}/assets/js/contact.js"></script>
{/block}
But, the files not load in the browser. Any ideas ?.
That's not how it works, the blocks are not processed simply by including a file. It should be something like:
base.tpl:
<html>
<head>
{block name="javascript"}
<script src="{$BASE_URL}/assets/js/libs/jquery-1.10.2.min.js"></script>
<script src="{$BASE_URL}/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="{$BASE_URL}/assets/js/common.js"></script>
{/block}
</head>
<body>
{block name="contents"}{/block}
</body>
</html>
contact.tpl:
{extends file="base.tpl"}
{block name="javascript" prepend}
<script src="{$BASE_URL}/assets/js/libs/validation/jquery.validate.js"></script>
<script src="{$BASE_URL}/assets/js/libs/validation/localization/messages_es.js"></script>
<script src="{$BASE_URL}/assets/js/contact.js"></script>
{/block}
{block name="contents"}
Your contact form here
{/block}
Check Smarty's Template Inheritance for more information
I got a method that has served me. I define in my controller (php script) the paths to js, in an array.
In the tpl, iterate the "array of paths" and include the files.
Related
I'm trying to import header.html for avoiding file duplication. But in this situation, I can't use PHP.
This is the head section of index.html file,
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
The body section I have called my header.html as follows,
<body>
<!-- include Header -->
<div id="header"></div>
<!-- end include header -->
</body>
The header is including fine but after the header included the dropdown lists become unclickable.
When I go to inspect elements there are following errors,
One possible reason for your problem would be that if you already have <html><head><body> tags in all header.html, footer.html and your master page. When you import those sub pages in your master page all those tags will come along with contents. If its true delete those tags from your sub pages because your master page should only have one of specific tags
1) Remove the following tags from header.html and footer.html
<html>
<head>
</head>
<body>
</body>
</html>
2) Regarding Slick error please make sure you are not calling the init twice, best way would be
$('.selector').slick();
$(document).ready(function() {
$.get("header.html", function(response){
$('#header').html(response);
});
})
<?php include_once('header.html');?>
<div id="header"></div>
<?php include_once('footer.html');?>
I'm trying to add this library to my project: https://github.com/DragonBones/DragonBonesJS/tree/master/Phaser/Demos
I use webpack for merging all libraries, it produces such output in index.html:
<script type="text/javascript" src="./dist/vendor.bundle.js"></script>
<script type="text/javascript" src="./dist/bundle.js"></script>
I'd like to inject required files between vendor.bundle.js - which, as I suspect contains all remaining libraries merged into one file - and bundle.js - which contains my game. I could also inject them at the end of vector.bundle.js, it doesn't matter for me. Unfortunately I don't know how to do that.
Let's say that's the list of files I need to load:
<script src="./libs/dragonBones/dragonBones.js"></script>
<script src="./out/DragHelper.js"></script>
<script src="./out/BaseDemo.js"></script>
<script src="./out/HelloDragonBones.js"></script>
<script src="./out/AnimationBase.js"></script>
<script src="./out/DragonBonesEvent.js"></script>
<script src="./out/AnimationLayer.js"></script>
<script src="./out/BoneOffset.js"></script>
<script src="./out/InverseKinematics.js"></script>
<script src="./out/BoundingBox.js"></script>
<script src="./out/ReplaceSlotDisplay.js"></script>
<script src="./out/ReplaceAnimation.js"></script>
<script src="./out/CoreElement.js"></script>
<script src="./out/PerformanceTest.js"></script>
Is there a way to modify index.html template to include them between these two files mentioned earlier? Or maybe there is better way of doing that?
I'm using both AngularJS (v1.6.4) and jQuery (v2.1.4) in my web application. I included static html files using ng-include. So my index.html is like that:
<body>
<div id="wrapper" ng-controller="mainCtrl">
<div ng-include="'partials/header.html'"></div>
<div ng-include="'partials/menu.html'"></div>
<div class="content-page">
<div ng-view></div>
<div ng-include="'partials/footer.html'"></div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="plugins/jquery-datatables-editable/jquery.dataTables.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.js"></script>
<script src="assets/js/main.js"></script>
<script>
$("#datatable-editable").DataTable();
</script>
</body>
As you see above I have 3 include files and 1 view. I used datatable in angular view. And I want to initialize it in my index.html file with $("#datatable-editable").DataTable(); But it doesn't work. When I write html elements directly to the page instead of including, it works fine. Why is this happening? How can I solve it?
i'm using this code for import an external html file in my plugin:
<?php
...
function showCalendar() {
include 'index.html';
}
add_shortcode( 'calendar', 'showCalendar' );
?>
but into the html i have some of javascript code like this:
<head>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="jquery-ui.mycode.js"></script>
</head>
<body>
<div class="box">
<script>
/*some code*/
</script>
</div>
</body>
Wordpress is not executing that part. How can i fix that? thx!
Use full path for your javascript files in .html file.
In Wordpress you can't include scripts directly in files.
You should include your script using wp_enqueue_scripts, or you can register the scripts and include later when you need it using wp_register_scripts.
When I reload a page called Donkey.aspx, there's a breakpoint being hit on the method below.
protected void Application_BeginRequest(object sender, EventArgs e)
{
if (application.Request.Url.AbsolutePath.EndsWith(".blopp")) { ... }
}
The problem is that all I get to see is a hit on the Donkey.aspx and another file (the one with id __browserLink_initializationData) referenced by it, only. However, there's a bunch of other references to files and those are not causing hits on the method. The end of the produced page looks like this.
<script type="text/javascript" src="/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.placeholder.js"></script>
<script src="beep.blopp" type="text/javascript"></script>
<script src="typeahead.bundle.min.js" type="text/javascript"></script>
<script type="text/javascript" src="utils.js"></script>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR"
id="__VIEWSTATEGENERATOR" value="54ACFC5B" />
</div>
</form>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"f51b45a6ac174b6e8880184492a80734"}
</script>
<script type="text/javascript" src="http://localhost:64593/9...7/browserLink" async="async">
</script>
<!-- End Browser Link -->
</body>
Accessing another page gives me the expected behavior, namely a bunch of hits on the event handler above, including CSS-files etc. Notable is that the files do indeed get loaded, as verified by the functionality of the scripts, console status codes (200 and 304 all around). The master page is virtually empty.
I'm at loss on what's wrong and even more uncertain on how to trouble-shoot it.
Static files are usually cached by browser. Turn off browser cache or reload all from server (Ctrl+F5).