Placing HTML code from external doc into a JS file

Question

I have a JS file, and I would like to place the HTML code from an HTML file within the JS file - is this possible? Currently the HTML code is baked into the JS file in escaped code - e.g. as per example here:

"html": "<div class=\"slideTitleBase\" style=\"background-image:url(slides/_images/Title.jpg); background-size:cover;\"><div class=\"TitleLHS\"><h1>H1 Title</h1><h2>H2 Title</h2></div></div>"

This is messy and not very easy for people to edit - hence why I would like the HTML content to be created in normal HTML and then placed into the JS file so the system can run as required.

Please advise if possible?

e.g. If I have an HTML file called "example.html" - id want to be able to tell this JS file - to pull the raw HTML content from the "example.html" file - so the content of example.html would be:

<div class="slideTitleBase" style="background-image:url(slides/_images/Title.jpg); background-size:cover;"><div class="TitleLHS"><h1>H1 Title</h1><h2>H2 Title</h2></div></div>

There are many different options. Do you have a specific build chain/tools or is the JS hand-coded? — Boldewyn, Oct 09 '14 at 15:16
I'm not sure I understand. Could you clarify: What backend language are you using, if any (php, .net, etc)? Are you using JQuery or another front-end library where you're using this code? — amphetamachine, Oct 09 '14 at 15:16
Better yet, put your HTML in an external **HTML** file, and load the HTML using a GET request. — Dave, Oct 09 '14 at 15:17
Is it a possibility to get the HTML from the file asynchronously or do you need to hard-code the HTML into your JS? If the former, you could use an AJAX request (such as [jQuery's .get](http://api.jquery.com/jQuery.get/)) in your JavaScript to load the file as a string into your data structure at runtime. — amphetamachine, Oct 09 '14 at 15:19
amphetamachine - that sounds like what I need - do you have an example you can share of how this is done? — dubbs, Oct 09 '14 at 15:20

Dave · Answer 1 · 2014-10-09T15:40:12.033

0

Here's how to load the external HTML using an AJAX request.

In jQuery:

$.get("external.html").done(function(html) {
  document.write(html);
});

If you are going to be doing this stuff a lot I highly recommend jQuery, but here's the vanilla javascript if you need it:

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
    if (request.readyState === 4) {
        if (request.status === 200) {
            document.write(request.responseText);
        }
    }
};
request.open("GET", "external.html", true);
request.send(null);

edited Oct 09 '14 at 15:40

answered Oct 09 '14 at 15:21

Dave

10,748
3
43
54

Thanks - any chance of the plain JS version as well? – dubbs Oct 09 '14 at 15:23
Also any chance of an example of wirting the html content of external.html into a js var? – dubbs Oct 09 '14 at 15:27
Thanks Dave - in the jQuery example - is the HTML content being passed into a var in your example? – dubbs Oct 09 '14 at 15:31
1

In the jQuery `.done` handler, that variable which I have named `html` could be named anything and can be used like any other JS variable. You just need to remember you are using AJAX now so you don't have immediate access to the HTML variable, so other scripts on your page that need it may have to be restructured to work properly. If you are confused by this I suggest reading [this answer](http://stackoverflow.com/a/14220323/361762) – Dave Oct 09 '14 at 15:36
Thanks Dave - sorry - it does not make sense to me. – dubbs Oct 09 '14 at 15:45
All I want is the HTML code from an HTML file to be called into a JS file into a defined variable - e.g. call in the contents of "example.html" into a variable in a JS file called "htmlContent" – dubbs Oct 09 '14 at 15:47
OK so change my `document.write()` to `htmlContent =`. That will set your variable, but depending on when you need to access that variable it may or may not be loaded. I can't tell without seeing your js. – Dave Oct 09 '14 at 15:52
thanks - that logic makes sense - but something not right still – dubbs Oct 09 '14 at 15:58
the issue is I need the HTML content returned as a string – dubbs Oct 09 '14 at 16:05

score 0 · Answer 2 · answered Oct 09 '14 at 15:26

You can try loading the file asynchronously at run time. Trick is, though, that you have to restructure your code to execute when the data is loaded.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
var myDataStructure = { };
function proceedWithPopulatedData () {
    alert('got html ' + myDataStructure.html);
}
$.ajax({
    url: 'foo.html',
    success: function (rawdata) {
        myDataStructure.html = rawdata;
        proceedWithPopulatedData();
    }
});


</script>
<head>
<body>

thanks - but i want to call the HTML content from an HTML file into the JS file... this solution does not do that? — dubbs, Oct 09 '14 at 15:28

score 0 · Answer 3 · edited Oct 09 '14 at 22:47

0

This is the answer... found it on another StackOverflow post!

$.ajax({
    type: "POST",
    url:"example.html",
    data: "{}",
    async: true,
    dataType: "text",
    success: function( htmlContent ) {
        console.log(htmlContent);
    }
});

edited Oct 09 '14 at 22:47

Dave

10,748
3
43
54

answered Oct 09 '14 at 16:13

dubbs

1,167
2
13
34

The [$.get()](http://api.jquery.com/get/) command I used in [my answer](http://stackoverflow.com/a/26282165/361762) is just shorthand for the [$.ajax()](http://api.jquery.com/jQuery.ajax/) command you are using here. – Dave Oct 09 '14 at 22:15

Placing HTML code from external doc into a JS file

3 Answers3