This is a slightly weird question, but I couldn't find the answer anywhere and I'm far from a pro at PHP.
Basically, two things, firstly, can you use the PHP include function in the head of a webpage?
Also, if that is possible, is it also possible to use the included PHP file for referencing Javascript files? Because I've finished my template and I've been looking at different ways I can make quick changes to all pages once completed, and of course, PHP include seemed best, however, I may want to reference a JS file sometime, so would it be possible to have in the <head> something like this:
<?php include "ref.php"; ?>
And then that PHP file to look something like this:
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
And then, that should reference jQuery into all pages that have ref.php included in the head. Or am I just being silly?
If there's any other ways I could reference a JS file on all pages, please let me now :)
Yes that's fine. I think a term for the concept you're trying to go for could reasonably be "modularization". You can separate your site into different modules so that you only have to update the code in your include rather than changing the code for say, 10 different pages every time.
PHP simply processes all your code before it gets sent to the client, so the client (i.e. any web browser) will simply see the output.
Theoretically, you could even do something like this (even though there wouldn't be much use for it). This is simply to illustrate a point:
HTML:
<?php include "doctype.php"; ?>
<html>
<!-- etc. -->
doctype.php:
<!doctype html>
All the client would see is:
<!doctype html>
<html>
<!-- etc. -->
In my current site, I have the head in its own php file, my header (which contains navigation, etc.) in another php file, my footer in a php file, and then all my script elements inside yet another php file which is included at the end of the body.
There is a mistake i think in the syntax of include function , you may need to try this :
<?php include("ref.php"); ?>
By 'head of a web page' if you mean when beginning the code for a webpage, yes certainly you can do it. Infact it is more convenient to have repeating code blocks for all pages like the headers and footers stored as separate php files and then include them on pages. For eg <?php <!DOCTYPE html> <html><head><title></title><script...></script>......</head><body>..........?> in a file like head.php and <?php </body><footer>.......</footer> in a file like footer.php and them just use include on all pages
Yes you can do this but I would recommend that you take the time to break up the ref.php into header.php and footer.php so that head would be above the fold (body tag) and the footer will have the closed BODY and HTML tag so you can add any remaining items you need to in the footer.
Related
I am given this code which should display an embedded small coupon version of this page https://weedmaps.com/deals#/1118217:
<script type="text/javascript">var coupon_id = 17811;</script>
<script type="text/javascript">var coupon_type = "deliveries";</script>
<script type="text/javascript" src="https://weedmaps.com/embed/coupon.js"></script>
I do not know how to add the JavaScript to the HTML correctly. I have placed the following scripts in the head section. But I don't understand how to have the coupon generate in the div I want it to. I have tried calling the JavaScript function, but I've never worked with JavaScript before. Could someone please help me embed this coupon.
I've taken a look at your script and first of all: it definitely should be placed inside the document and not into the <head> section because coupon.js is writing out html at the placement of the coupon.js script import.
In theory you just need to place the script and it should work but there are some problems:
You need to execute it on a web server - when running as a plain html file the script just tries to find the libraries in your file system which does not work.
It still would not work because it would still try to find some resources at your web-server. In mycase it the script tried to load http://localhost:63342/restpoints/deliveries/17811/deal which will not work
To prove 2. just try https://weedmaps.com/restpoints/deliveries/17811/deal with the correct domain. Then you are receiving correct JSON which is used to fill the coupon pane.
=> Consequently the script you were given has problems if it should be executable from domains different from "weedmaps.com"
Javascript can be between head tag but it advisable to put it below before the body closing tag, to allow your page contents loads first before loading javascript. Just import your javascript. and call out. Hope this was helpful.
<!DOCTYPE html>
<html>
<head>
</head>
var coupon_id = 17811;
The JS indicates it is looking for an element with an id of #weedCouponPane. Do you have this in your html? i.e.
<div id="weedCouponPane"></div>
This question already has answers here:
How to create a template in HTML?
(3 answers)
Closed 6 years ago.
I am looking for a best approach to include one html file in another.
Basically the need is to create one header and footer file which will be included in multiple pages across the app. The header/footer file may contain required css and js. And i may want to include some other templates which i can use for popup etc. I know we can do this by
Ajax
HTML5 import(not supported in most of the browser. so not useful)
Any other way? or any best way to do which will take care of the performance.
Thanks in advance...
Solution:
Just wanted to update here the approach I took for this problem.
I am using Grunt. So I use the include plugin available in it which I run during creating build to include different HTML files together.
Thanks anyway for your time...
<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>
Include the header.html and footer.html at the same location as index.html
I'd use PHP. The "parent" page has to be a .php file, but except of a tiny bit of PHP include command it can exactly look like a HTML page. At the spot where the other file is to be included, use
<?php
include "my_other_file.php";
?>
I am working on a web app that can display data in two drastically different formats. To do this, I am using a master page with two different content pages for the differing views. I am using .svc files to do AJAX style server requests. I would like to be able to do a service call from the master pages javascript, then run the appropriate onSuccess javascript method (which would ideally lie in another .js file) to display the data based on which content page I am in. I am guessing this would be done with some kind of function delegate, but I am new to web development and not sure how to do this. Any help would be greatly appreciated.
If you can do everything on one page, your HTML will probably look something like this:
<!DOCTYPE html>
<html>
<head>
<script src="masterScript.js"></script>
<script src="module/childScript.js"></script>
<script>
console.log(globalVariableFromMasterScript)
doSomethingFromChildScript(globalVariableFromMasterScript)
</script>
</head>
<body>
<p>This is the html page</p>
</body>
</html>
This was a stupid question... Just attach different js files to the content pages. Give the functions the same name and it works fine.
I know this is silly but i think i cant crack it for last couple of hours.
I am writing to understand how this works.
I have a simple js function that i want it to be kept in an external file and it just dont work when invoked from my .php file.
Here is the setup:
I have 4 separate php files like register.php, dashboard.php, header.php, actions.php
I have defined some functions in my script.js like below
function fn1(){
alert("fn1");
}
function fn2(){
alert("fn2");
}
function fn3(){
alert("fn3");
}
Now, I have defined in my header.php to include this script file as
<!doctype html>
<html>
<head>
...
</head>
<body>
<script src='/js/script.js'></script>
</body>
...
I include this header.php in my other php files like
<?php include('header.php'); ?>
<script language="javascript">
fn1();
</script>
This does not work. It says ..
SyntaxError: syntax error script.js:1
ReferenceError: fn1 is not defined dashboard.php
Is there something wrong in the way i setup and distribute them into separate files ?
The same function if i locally define in these php files separately, it works fine.
So its a problem only when invoked from an external js script.
Please suggest what am i doing wrong.
I have bunch of functions that i wrote earlier which works fine but i want to understand this first so that i can go on with moving those functions in the same way to keep them global.
What i want to acheive ?
I have PHP files based on the view/actions as follows ..
login.php
register.php
dashboard.php
useraction.php
header.php
there are several div's like my navbar, footer, sidebar that are common to all these php's;
header.php has all the required js functions to load these div's based on various conditions and events;
My plan is to include header.php in all my php's so that all the functions defined in it are included too in every php file and the common div's are
loaded by the header.php itself.
Does it make sense ? Is this the right way to achieve this? If not, how do i do, please clarify.
So as per this plan, i attempted making a simple js function that can be kept in an external js to be called from these php which did not work
language is deprecated. You should just use <script> tags.
The problem is with your first line, you should post that, the posted code works fine, I just tested it. It's probably a syntax mistake.
Still, you should consider loading the scripts in a different php file than the one that takes care of setting up the header and the navbar or what have you.
Edit:
Sorry, I said probably a syntax mistake, when it clearly is just that:
SyntaxError: syntax error script.js:1
Delete the first line of your 'script.js' and it should work.
This got it working for me:
header.php
<!doctype html>
<html>
<head>
</head>
<body>
<script src='script.js'></script>
main.php
<?php include('header.php'); ?>
<script>
fn1();
</script>
script.js
function fn1(){
alert("fn1");
}
function fn2(){
alert("fn2");
}
function fn3(){
alert("fn3");
}
Edit 2:
Suddenly, this seems more a php question.
Your scripts should probably be loaded in a separate php file, scripts.php, that you include in the bottom of a specific php page, but just before opening the <script> tags, if there is need for particular js on that page.
This makes for a faster page loading. You could, though, include specific scripts in the header part, even in the document's <head>, but you should try to keep those scripts lightweight, so they don't heavily delay the user.
You can include php's anywhere. For example, this could be dashboard.php:
<?php include('header.php'); ?>
<div id="ImOnlyOnThisParticularPage"></div>
<!-- Footer loads scripts after the <footer> or divs that it contains -->
<?php include('footer.php'); ?>
<script>
var iOnlyDoSomethingInThisPage = function()
{
console.log("debug");
}
</script>
</body>
</html>
#param LoL i replicated your code and kept it in separate files and i am getting the alert as expected .In case you have issues open your console panel and try debugging.Press F12 and check for console related errors mostly u don't have your files are correct path
My question is similar to this one
How to include an HTML page into another HTML page without frame/iframe?
But the answers are not working for me. Objects and iframes create a box with scrollbars, which I don't want, and if I have links to other pages, I would like the whole page to change, not just what's inside the box.
This instruction doesn't work
<!--#include virtual="/footer.html" -->
I want to use only html, because this is how the website has been built and we are not redesigning it. I am only doing this for content modification purposes.
Is it a bad practice to write an html header (or footer) in a javascript file then include the .js in all of my html files?
1st edit
I have about 70 different html static pages.
I want to update contents such as the logo, the menu, the meta description of the web site, the text color, etc. but at the moment, I have to make each of these modifications 70 different times.
I used javascript for the html part of the menu, because the menu worked with javascript anyway, and included the file in all of my html files.
function writeJS(){
var strVar="";
strVar += "<body bgcolor=\"#000000\">";
strVar += "<div class=\"Main_container\">";
...
document.write(strVar);
}
writeJS();
I don't know if it is a good or bad idea to do the same with those tags for example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" ...
2nd edit
Although the html/javascript option was viable, we decided to invest a couple of days to go for a wordpress.org site (cheaper and better in the long run).
This instruction doesn't work at all
<!--#include virtual="/footer.html" -->
...probably becaue SSI is not enabled. Presumably you're telling us this because you think it would give you the result you want - implying that part of the question is why didn't it work? What did you do to investigate?
Is it a bad practice to write an html header (or footer) in a javascript file then include the .js in all of my html files?
It's not about bad practice - it won't work - you can inject html from javascript - but you need javascript code to do the injecting. Also this contradicts your earlier statement:
I want to use only html
The code you've provided does not inject html it appends it. The problem with document.write is that it only writes to the end of the document input stream. And if that stream is already closed, it re-opens it and clears the current HTML. There's never a good reason to use document.write(). Consider:
<html>
<div id="header">
<noscript>....</noscript>
</div>
<div id="page_specific_content">
...
</div>
<div id="footer">
<noscript>....</noscript>
</div>
</html>
and...
function addHeader()
{
var el=document.getElementById("header");
if (el) {
el.innerHTML="...";
}
}
But this is still a bad way to write a dynamic website. Even if you don't want to run ASP or PHP or PERL or serverside JS or.... on your production server, it'd make a lot more sense to to dfevelop using a proper CMS or templating system then scrape the HTML to get a static version for publication.
Yes, it is bad practice. Use the right tool for the right job.
For most of the things you mention, you need to use an external stylesheet (bgcolor in 2013?). This will already prevent you from having to change 70 files.
If there's also content you wish to share between pages, the proper way would be to use server-side scripting (such as php) to include it.
Including it client side is messy and will only work partly. You can only load things that go into the DOM (so not your meta information or your Head element's content). Plus your site will be completely disabled when a user does not have javascript enabled (not that common these days, but still).
I guess there could be numerous ways to do this:
Use SSI as described in the solution at How to include an HTML page into another HTML page without frame/iframe?
If you have php or similar scripting languages and feel confortable, you could use it.
Use simple js injection using JQuery or native JS code. See: https://stackoverflow.com/a/676409/2027264
Use IFrames with some CSS to get rid of scrollbars
Use Javascript templates(Underscore, backbone and many others). Also see: What Javascript Template Engines you recommend? and http://en.wikipedia.org/wiki/Javascript_templating
Hope this helps.
I'm fairly sure that include solution only works server side. Did you try the jQuery solution that was provided on that page? It seems to fit your javascript requirement:
If you mean client side then you will have to use JavaScript or frames.
Simple way to start, try jQuery
$("#links").load("/Main_Page #jq-p-Getting-Started li");
Source comment.