Include javascript and html code from another file

Question

I have a project that consists of multiple visualizations, all using the same dropdown menu for selecting what csv to load. I want to be able to add new options once and have it changed on all the files. Best way is to use html and javascript code in one file, and have it included on the others, so that if I want to add more options in the dropdown menu I only do it in that single file. Is there a way to do this with html, and if so, do I have to change the layout of the reusable "A" file so that it is properly used inside the rest? If it cannot happen with html, what is the best way to do it and what changes to I have to make in the code layout in the documents?
Here is the reusable code that has to be on file A:

<div id="dropdown">
    <select id = "opts">
        <option value = "ds1">Atlas</option>
        <option value = "ds2">BioSQL</option>
        <option value = "ds3">Coppermine</option>
        <option value = "ds4">Ensembl</option>
        <option value = "ds5">Mediawiki</option>
        <option value = "ds6">Opencart</option>
        <option value = "ds7">PhpBB</option>
        <option value = "ds8">Typo3</option>
    </select>
</div>
<script type="text/javascript">
    var ds1="../CSV/atlas/results/metrics.csv";
    var ds2="../CSV/biosql/results/metrics.csv";
    var ds3="../CSV/coppermine/results/metrics.csv";
    var ds4="../CSV/ensembl/results/metrics.csv";
    var ds5="../CSV/mediawiki/results/metrics.csv";
    var ds6="../CSV/opencart/results/metrics.csv";
    var ds7="../CSV/phpbb/results/metrics.csv";
    var ds8="../CSV/typo3/results/metrics.csv";
</script>

And I want to include this after the style block in files B,C,D etc that look like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script type="text/javascript" src="../d3/d3.js"></script>
        <script type="text/javascript" src="../d3/d3-tip.js"></script>
        <style type="text/css">
            body{
                font: 16px Calibri;
            }

        </style>
        <!--...HERE IS WHERE I WANT TO INSERT THE CODE FROM THE A FILE-->


    </head>
    <body>
        <script type="text/javascript">

I have seen other posts asking somewhat the same thing, but haven't found a way to do this. I think it has to do mostly with the fact that I insert both html and javascript code, but I'm generally new to this and cannot figure the proper way. Thanks in advance for any help.

do you need to show "csv" data acording selection? or load html/script, where you script is stored? — Klaujesi, Sep 02 '15 at 21:59
I only need to load the script so I can use the code in the A file. The answer with the use of php just worked on my university server. Now I just need to install php on my computer. Thanks for offering though. @Klaujesi — John M., Sep 02 '15 at 22:24

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

Let's assume you store what you call file A in options.html, then my suggestion is the following:

"script.js":

// because you put your script in the <head> of B,C,D we wait for the page to load
window.onload = function () {
    // We locate the dropdown menu
    var dropdownMenu = document.getElementById('dropdown');
    // load the file via XHR
    loadHTML(function (response) {
        // the response will be a string so we parse it into a DOM node
        var parser = new DOMParser()
        var doc = parser.parseFromString(response, "text/html");
        dropdownMenu.innerHTML = doc.getElementById('dropdown').innerHTML;

        // in case you want to do something with the references to the .csv files
        var csvFiles = doc.getElementsByTagName('script')[0];
        console.log(csvFiles);

    })
};

function loadHTML(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("text/html");
    xobj.open('GET', 'options.html', true);
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
        }
    };
    xobj.send(null);
}

Note that this only runs, if you host it on a http-Server. In other words it won't run locally due to Same-origin policy.

Parsing string to DOM was inspired by this answer.

loading the HTML file via XHR was inspired by this post on codepen.

I modified your version of B,C,D:

reference to script.js in the head-Element
added a div-Element with ID "dropdown"

Since the use of php seemed to work (although I initially wanted to use just html or javascript, but seemed simple this way) I will stick with the use of php as KeepoN mentioned bellow. Thank you for the response and help @franzfridolin — John M., Sep 02 '15 at 22:27

score 0 · Answer 2 · answered Sep 02 '15 at 21:16

0

That's done with php just call it like this:

<?php include('file.html'); ?>

answered Sep 02 '15 at 21:16

KeepoN

137
1
11

Thanks it worked on the university server. I just have to install php in my computer now. Many thanks my friend. – John M. Sep 02 '15 at 22:25
You're welcome, it's always nice to help anybody who needs help – KeepoN Sep 02 '15 at 22:28
And save him from the anxiety of deadlines. Truly appreciated help :) – John M. Sep 02 '15 at 23:10

Include javascript and html code from another file

2 Answers2