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".

mbuurman · Accepted Answer · 2012-02-23 08:35:15Z

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, 2012 at 8:35

mbuurman

861 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Coisox Over a year ago

somehow it didn't work. When I do alert(p1) in the otherFile, firebug say p1 is undefined

Community · Accepted Answer · 2017-05-23 12:27:30Z

0

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?

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Feb 23, 2012 at 10:57

Reddy Prasad

2512 silver badges6 bronze badges

Comments

Magnar · Accepted Answer · 2012-02-23 08:35:09Z

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, 2012 at 8:35

Magnar

28.9k8 gold badges62 silver badges66 bronze badges

1 Comment

Coisox Over a year ago

I have refined my question for better understanding.

Collectives™ on Stack Overflow

How to split javascript & html into multiple files

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related