I found some problems to load js files in php file. I have file php admin-pp-sipp-litbang.php. Inside that file, I include some php files with switch case like that:
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<?php
switch (#$_GET['modul']) {
case "beranda":
include "tampilan-admin-pp/beranda.php";
break;
case "permintaanakun":
include "tampilan-admin-pp/permintaanakun.php";
break;
case "permintaanpp":
include "tampilan-admin-pp/permintaanpp.php";
break;
case "chat":
include "tampilan-admin-pp/chat.php";
break;
case "detailsproposal":
include "tampilan-admin-pp/details_proposal.php";
break;
case "detailspermintaanakun":
include "tampilan-admin-pp/details_permintaanakun.php";
break;
case "detailspengguna":
include "tampilan-admin-pp/details_pengguna.php";
break;
default:
include "tampilan-admin-pp/beranda.php";
}
?>
</div><!--/.main-->
After that, I load js files for tampilan-admin-pp/chat.php on admin-pp-sipp-litbang.php near close body tag . Here are the js files.
<script id="message-template" type="text/x-handlebars-template">
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-time" >{{time}}, Today</span>
<span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
</div>
<div class="message other-message float-right">
{{messageOutput}}
</div>
</li>
</script>
<script id="message-response-template" type="text/x-handlebars-template">
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">{{time}}, Today</span>
</div>
<div class="message my-message">
{{response}}
</div>
</li>
</script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js'></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/load_list_user_chat.js"></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/UserOnline.js"></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/index.js"></script>
The problem is the js files for tampilan-admin-pp/chat.php affects another included files. How can I load that js files only for tampilan-admin-pp/chat.php?
Is there any reason why you can't just move the <script> tags at the bottom of admin-pp-sipp-litbang.php into tampilan-admin-pp/chat.php?
If you need them to be included at the end of admin-pp-sipp-litbang.php, then you will need to use another switch statement or similar logic after the handlebars templates.
UPDATE:
The problem is that your php files are being conditionally included by the switch statement but your "chat" javascript files are being included every time regardless. You need to conditionally include the javascript files as well. You could just add the <script> tags to the original switch statement, but often javascript is better loaded just before the </body> ending tag, as you have done. To keep that characteristic, add another switch statement at the bottom of admin-pp-sipp-litbang.php before including the js files.
So
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js'></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/load_list_user_chat.js"></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/UserOnline.js"></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/index.js"></script>
Becomes:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js'></script>
<?php switch($_GET['modul']):
case 'chat': ?>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/load_list_user_chat.js"></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/UserOnline.js"></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/index.js"></script>
<?php break;?>
<?php endswitch;?>
That way you can add other case statements that match the other includes at the top of the file to conditionally include their javascript too.
Maybe to make some variable inside tampilan-admin-pp/chat.php.
Something like $chatIncluded = true;
Then conditional rendering of script tag, if chatIncluded is defined and is true, load JS file.
Related
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?
<!doctype html>
<html>`enter code here`
{% include head.html %}
<body>
<div class="container jumbotron">
<h1 class="text-center"><i class="fa fa-paper-plane float shadow"></i> Flyaway.css</h1>
<p class="lead text-right">~ created by <small><i class="glyphicon glyphicon-fire"></i> 進擊的燊</small> ~</p>
<ul class="list-inline text-center">
<li>
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=lushen&repo=flyaway&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</li>
<li>
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=lushen&repo=flyaway&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
</li>
</ul>
{{ content }}
{% include footer.html %}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/back-to-top.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/prefixfree.js"></script>
<script type="text/javascript" src="js/shake.js"></script>
<script type="text/javascript" src="js/flyaway.js"></script>
</body>
</html>
This is from an opensource project on Github. I just want to understand this code.
There are head.html and footer.html files, but when I open the default.html file on my computer,the head and footer file do not load on the web page. But on the other hand, when I use the 'check'-button on Chrome to see the source code, the head and footer are actually loaded.
At the same time, I've tried searching the internet to find what {{}} and {% include filename%} really are, but there seems to be no such a syntax.
This is most probably just template file of some templating framework, that code will get replaced with PHP or other server side language code.
For example
<?php include 'head.html'; ?>
Which will include to this document an actual file in same folder with that name.
This looks like a Twig PHP template. The documentation is here.
I have a code by using Materializecss and PHP. I want to open some modal by returning Php code. For example code is 4 is equal wrong password etc.
But I never satisfied to show modal even try several suggestions shown on this site.
Can you help me?
Here is part of my code :
<?php
....
else {
echo "<script>$('#modalWrongPassword').fadeIn('show');</script>";
}
}
?>
...
<div id="modalWrongPassword" class="modal">
<div class="modal-content">
<h4>Hatalı şifre</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Kapat
</div>
</div>
...
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/materialize.min.js"></script>
<script src="../js/jquery-2.js"></script>
<script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }</script>
<script src="../js/jquery.js"></script>
<script src="../js/prism.js"></script>
<script src="../js/lunr.js"></script>
<script src="../js/materialize1.js"></script>
<script src="../js/init1.js"></script>
...
With Materializecss, can't open a modal like the way you are trying
echo "<script>$('#modalWrongPassword').fadeIn('show');</script>";
Here is the reference how to show Materializecss Modal programatically, via JavaScript
echo "<script>$('#modalWrongPassword').openModal();</script>";
Note: Make sure you include jQuery and other JS libraries only one time, e.g you have included jQuery and Materialize JS multiple times in document.
I have the below code. However, my JQuery wont run when the #id and .classes it is looking for are in partials when viewing this static page. How do I get it to work?
<body ng-app>
<h2>JQuery wont run if code it is looking for is in a Partial</h2>
<div ng-include="'_includes/partials/menu.html'" ></div>
<br />
<h2>JQuery will work if the code it is looking for is here on the page (DOM)</h2>
<div class="container">
<div class="row">
<div class="col-xs-12">
<ul class="nav">
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Services</a></li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="_includes/scripts/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="_includes/scripts/custom.js"></script>
</body>
It is not a good practice to try to find html elements and modify them in an AngularJS app as you would normally do in a JQuery enabled html. Instead, try to implement whatever you are thinking of only using Angular.
Anyway you want to use ng-directives instead jQuery calls.
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.