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
– Klaujesi, Commented Sep 2, 2015 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.
– John M., Commented Sep 2, 2015 at 22:24

Community · Accepted Answer · 2017-05-23 12:17:17Z

1

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"

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Sep 2, 2015 at 21:43

fkneist

237 bronze badges

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

1 Comment

John M. Over a year ago

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

KeepoN · Accepted Answer · 2015-09-02 21:16:29Z

0

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

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

answered Sep 2, 2015 at 21:16

KeepoN

1371 silver badge11 bronze badges

3 Comments

John M. Over a year ago

Thanks it worked on the university server. I just have to install php in my computer now. Many thanks my friend.

KeepoN Over a year ago

You're welcome, it's always nice to help anybody who needs help

John M. Over a year ago

And save him from the anxiety of deadlines. Truly appreciated help :)

Collectives™ on Stack Overflow

Include javascript and html code from another file

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related