1

I am working on a project with destructuring assignment for Menu Items in an own js file. The 'Menu point' is loading the HTML content out of the html_content.js file into the index.html file itself. So

var html_content {
    "Menu point 1": "<p>html content for menu point 1</p>",
    "Menu point 2": "<p>html content for menu point 2</p>"
}

Is loaded via

gridWrapper.innerHTML = html_content[itemName];

into the HTML file. This is working fine, but now I want to load the HTML content out of a own file, something like

var html_content {
    "Menu point 1": "menu1.html",
    "Menu point 2": "menu2.html"
}

gridWrapper.innerHTML = <html_content[itemName]>; //load the HTML file here

I actually have no idea how to do that, my JS experience is very low.

There is another js file, I don't know if it's important for that, here's the main.js file

Alexander Mikhalchenko
  • 4,525
  • 3
  • 32
  • 56
Janis Jansen
  • 996
  • 1
  • 16
  • 36
  • Have you tried `gridWrapper.innerHTML = html_content[itemName];` (vanilla javascript) or `gridWrapper.html(html_Content[itemName]);` (jQuery) at all? – random_user_name Feb 06 '16 at 21:04
  • @cale_b he still has to load the file in. – Quill Feb 06 '16 at 21:12
  • Possible duplicate of [How do I load the contents of a text file into a javascript variable?](http://stackoverflow.com/questions/196498/how-do-i-load-the-contents-of-a-text-file-into-a-javascript-variable) – Quill Feb 06 '16 at 21:15
  • you are missing the = in the declaration of html_content – Jeremythuff Feb 06 '16 at 21:20

4 Answers4

1

To load the file in, you want to use XMLHttpRequest:

var client = new XMLHttpRequest();
client.open('GET', '/mypage.html');
client.onreadystatechange = function() {
  gridWrapper.innerHTML = client.responseText;
}
client.send();

from here

or you can use jQuery, like so:

$(gridWrapper).load('mypage.html')

See this Stack Overflow question for more ways to load files.

Community
  • 1
  • 1
Quill
  • 2,729
  • 1
  • 33
  • 44
0

In jQuery you can:

var html_content = {
  "Menu point 1": "menu1.html",
  "Menu point 2": "menu2.html"
};


$(function () {
  $.get(html_content["Menu point 1"], function (data) {
    $('#gridWrapper').html(data);
  });
});

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<div id="gridWrapper"></div>

In Javascript:

var html_content = {
  "Menu point 1": "menu1.html",
  "Menu point 2": "menu2.html"
};


window.onload = function() {
  var xhr= new XMLHttpRequest();
  xhr.open('GET', html_content["Menu point 1"], true);
  xhr.onreadystatechange= function() {
    if (this.readyState!==4) return;  // if NOT request finished and response is ready
    if (this.status!==200) return;  //if NOT OK
    document.getElementById('gridWrapper').innerHTML= this.responseText;
  };
  xhr.send();
}

<div id="gridWrapper"></div>
gaetanoM
  • 41,594
  • 6
  • 42
  • 61
0

If you have access to both files in the DOM then ajax is not necessary.

your index.html would look something like this:

<!doctype html>
<html>
   <head>...</head>
   <body>
       <div id="menu"></div>


       <script src="menuItems.js"></script>
       <script src="main.js"></script>
   </body>
</html>

menuItems.js

var html_content = {
    "Menu point 1": "<p>html content for menu point 1</p>",
    "Menu point 2": "<p>html content for menu point 2</p>"
}

main.js

var menuElement = document.getElementById("menu");

for(var menuPoint in html_content) {
    menuElement.innerHTML += html_content[menuPoint];
}

Example fiddle

Jeremythuff
  • 1,518
  • 2
  • 13
  • 35
0

With jQuery.load() its easy:

$(gridWrapper).load(html_content[itemName]);