How to split javascript & html into multiple files

Question

I'm using PHP, HTML & jQuery. Lets say this is my original working "index.html"

<script type="text/javascript" src="jquery.js"></script>
<script>
var p1 = "This is part 1";
var p2 = "This is part 2";
$(document).ready(function(){
    alert(p1);
    $('#content').html(p2);
});
</script>
<div id="content"></div>
<div id="content2">Hello</div>

I want to break the code into "index.html" & "otherFile.notSureWhatExt" but they are working as if in the same file.

index.html:

<script type="text/javascript" src="jquery.js"></script>
<script type="notSureWhatType" src="otherFile.notSureWhatExt"></script>
<script>
var p1 = "This is part 1";
$(document).ready(function(){
    alert(p1);
});
</script>
<div id="content"></div>

otherFile.notSureWhatExt:

<script>
var p2 = "This is part 2";
$(document).ready(function(){
    $('#content').html(p2);
});
</script>
<div id="content2">Hello</div>

Using jsp, I can simply use <%@ include file="otherFile.anyCustomExtAlsoWorks"%>. But here I don't now. What I want is when calling index.html, I can see message box "This is part 1" and 2 div at the bottom which is "This is part 2" & "Hello".

score 2 · Answer 1 · answered Feb 23 '12 at 08:35

2

You can put your javascript in a .js file. The script tags are not needed.

You can then include it with

<script type="text/javascript" src="otherFile.js"></script>

answered Feb 23 '12 at 08:35

mbuurman

86
1

somehow it didn't work. When I do alert(p1) in the otherFile, firebug say p1 is undefined – Coisox Feb 23 '12 at 08:41

score 0 · Answer 2 · answered Feb 23 '12 at 08:35

0

The extension should be .js and remove the <script>-tags from that file.

The type is text/javascript - but it is not necessary, as it is ignored by the browsers.

answered Feb 23 '12 at 08:35

Magnar

28,550
8
60
65

I have refined my question for better understanding. – Coisox Feb 23 '12 at 08:42

score 0 · Accepted Answer · edited May 23 '17 at 12:27

I think it can be done via "server-side includes" . any way you are using php so you can make use of php. But here the file1.php or file1.html can include in file2.php. That is a php/html file can include in a php file but not one html in another html. You can go through the following links : http://webdesign.about.com/od/ssi/a/aa052002a.htm and http://www.boutell.com/newfaq/creating/include.html and even one discussion has happened in How to include one HTML file into another?

How to split javascript & html into multiple files

3 Answers3