Calling one html file from another

Question

Hi I am creating a webpage that is going to input data into a table and I have to dynamically change the column span of the table regarding on a property.

I was looking to take the html code to create the table out of the original document and add it in to the original document when the page is loaded.

Here is the original file:

    <!doctype html>
    <html>
    <head>
        <link href='tt.css' rel='stylesheet' />
        <script src='jquery-1.11.0.min.js'></script>
        <script src='tt2.js'></script>
        <title>Timetable</title>
    </head>
    <body>
        <h1>Timetable</h1>
        <div id='controls'>Enter Module Code:<input value='' id='module'/>
            <button id='getModule'>Search Module Code</button>
        </div>
        <table id='fixedDetails'>
            <caption>Fixed Details</caption>
            <tr><th>Module Code</th><td id='moduleCode'></td></tr>
            <tr><th>Module Name</th><td id='moduleName'></td></tr>
            <tr><th>Module Leader</th><td id='moduleLeader'></td></tr>
            <tr><th>Credit Value</th><td id='credit'></td></tr>
    <tr><th>School Name</th><td id='schoolName'></td></tr>        
        </table>
        <script src='table.html'></script>
    </body>
    </html>

This is the code for my table:

    <!doctype html>
    <html>
    <table id='schedule'>
            <caption>Schedule</caption>
            <tr><th id='blank'></th><th>09</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th><th>15</th><th>16</th><th>17</th></tr>
            <tr><th>Mon</th><td id='mon09'></td><td id='mon10'></td><td id='mon11'></td><td id='mon12'></td><td id='mon13'></td><td id='mon14'></td><td id='mon15'></td><td id='mon16'></td><td id='mon17'></td></tr>
            <tr><th>Tue</th><td id='tue09'></td><td id='tue10'></td><td id='tue11'></td><td id='tue12'></td><td id='tue13'></td><td id='tue14'></td><td id='tue15'></td><td id='tue16'></td><td id='tue17'></td></tr>
            <tr><th>Wed</th><td id='wed09'></td><td id='wed10'></td><td id='wed11'></td><td id='wed12'></td><td id='wed13'></td><td id='wed14'></td><td id='wed15'></td><td id='wed16'></td><td id='wed17'></td></tr>
            <tr><th>Thu</th><td id='thu09'></td><td id='thu10'></td><td id='thu11'></td><td id='thu12'></td><td id='thu13'></td><td id='thu14'></td><td id='thu15'></td><td id='thu16'></td><td id='thu17'></td></tr>
            <tr><th>Fri</th><td id='fri09'></td><td id='fri10'></td><td id='fri11'></td><td id='fri12'></td><td id='fri13'></td><td id='fri14'></td><td id='fri15'></td><td id='fri16'></td><td id='fri17'></td></tr>
        </table>
    </html>

My problem is I don't know how to connect the two documents together

possible duplicate of [Include another HTML file in a HTML file](http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) — mark.inman, Feb 24 '14 at 19:50

score 0 · Answer 1 · edited May 23 '17 at 12:10

0

This looks like a duplicate to: Include another HTML file in a HTML file

What they do is use jQuery to load another file into a div element. I would highly recommend jQuery to solve this, as the other methods to do this require some server tinkering if you want to do this purely with html. jQuery is also great for dynamic pages as well.

edited May 23 '17 at 12:10

Community

1
1

answered Feb 24 '14 at 19:49

mark.inman

2,521
2
18
12

I tried the method that was used in this and was given the following error 'OPTIONS file:///C:/Users/The%20Spartacus/Desktop/Web%20Tech/tt/table.html No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.' – Mark Lockhart Feb 24 '14 at 20:04
Are you using jQuery? Are you using a server side language? This will help me deduce the next steps that are taken. jQuery is not necessary but easier than javascript IMO. If you are using a serverside language like PHP or Python or Ruby, then use Dustin Martin's answer above. – mark.inman Feb 25 '14 at 15:50

score 0 · Answer 2 · answered Feb 24 '14 at 19:50

If you want to add the contents of one HTML page to another when the page is loaded, the easiest way would be to use a PHP include.

For your page, you could just replace

<script src='table.html'></script>

with

<?php include 'table.html'; ?>

This requires that your web server support php, though.

Calling one html file from another

2 Answers2