javascript - use other html file specific data

Question

i have a main.html file which works well.

var elements = document.getElementsByClassName("quest")

<a class="quest">Quest 1</a>
<a class="quest">Quest 2</a>
<a class="quest">Quest 3</a>

However i would like to seperate it. So the main.html file still contains the javascript, but an other data.html file contains the html part of the code. I would prefer an option using pure javascript (no jQuery etc). Thank you.

That does not make sense. You can extract the JS to an external javascript file, but why keep JS by itself in an html file? Can you elaborate on the use case? — mplungjan, Jul 05 '16 at 08:10
Both files has other contents also. Thats the reason why i need them separated. — Raistlin Majere, Jul 05 '16 at 08:20
So you basically want to ajax in the data.html? Why is jQuery not allowed, it will simplify everything including the event delegation needed for your navigation — mplungjan, Jul 05 '16 at 08:22
i didn't use jQuery yet so i dont know anything about that. If there is no alternative options which is also simple i'll use that. But i wouldn't like to use "an other program" only for this if not neccesary. — Raistlin Majere, Jul 05 '16 at 08:26
Ajax and event delegated event handling has jQuery written all over it. It is really simple: `$("#someContainer").load("somehtml.html");` combined with `$("#someNavigatorContainer").on("click",".quest",function(e) { do something with the clicked link loaded from another file });` — mplungjan, Jul 05 '16 at 08:31
Could you explain a bit how do you want to connect these html files (main.html and data.html). HTML doesn't have including mechanism for another html files. Do you use any hyper-text processor like PHP or JSP? Or maybe you would like to connect them dynamically using Javascript? — Avseiytsev Dmitriy, Jul 05 '16 at 08:58
(1) i wanna read from data.html. As the code shows i want it works (2) the data.html contains a code which will choose what part of the data.html file should be shown at the main.html webpage. — Raistlin Majere, Jul 05 '16 at 09:05
*edit (2) the main.html contains a code which will choose .... — Raistlin Majere, Jul 05 '16 at 09:12

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

So, you need to load dynamically part of HTML page using JavaScript (native JavaScript).

You can use jQuery for this purpose: $("#htmlContainer").load("data.html");

Or you can replace jQuery.load with native JS (from here https://stackoverflow.com/a/32144585/2376676):

function load(target, url) {
  var r = new XMLHttpRequest();
  r.open("GET", url, true);
  r.onreadystatechange = function () {
    if (r.readyState != 4 || r.status != 200) return;
    target.innerHTML = r.responseText;
  };
  r.send();
}

load(document.getElementById('container'), 'data.htm');

edited May 23 '17 at 11:52

Community

1
1

answered Jul 05 '16 at 09:16

Avseiytsev Dmitriy

1,160
9
19

Thank you but i tried the native and it didnt work. i created a div class="container" however nothing happened. Also the var elements doesn't contain the variables what it should. /// First it had another problem about the url: data.html isn't in a "http:\" location (cause its on my computer in a folder). However i fixed that with Chrome --allow-file-access-from-files – Raistlin Majere Jul 05 '16 at 10:47
You should create div id="container" – Avseiytsev Dmitriy Jul 05 '16 at 11:25
yes i wrote id and it doesn't work. (just spell-mistake in my comment) – Raistlin Majere Jul 05 '16 at 12:02
You cannot perform AJAX request to load file from local disk. It is security issue. You have to deploy your code to local web server. Look at http://www.denwer.ru/ for example. – Avseiytsev Dmitriy Jul 05 '16 at 12:27

javascript - use other html file specific data

1 Answers1