28

I want to load some Jade content into a certain div on button click. I have found how to do this with jQuery, there are several posts on it, and essentially what I want to do is

$('#div').load('/somePage');

However, I am unable to use jQuery in my project. Is there an equivalent function in vanilla JavaScript?

Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
perennial_
  • 1,798
  • 2
  • 26
  • 41

3 Answers3

47

I think you can do this with the following;

var request = new XMLHttpRequest();

request.open('GET', '/somepage', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var resp = request.responseText;

    document.querySelector('#div').innerHTML = resp;
  }
};

request.send();

By the way, you can do this with fetch API too.

fetch('/somepage')
  .then(function(response) {
    return response.text();
  })
  .then(function(body) {
    document.querySelector('#div').innerHTML = body;
  });

By the way, you can read this blog post for learning something about fetch API.

Ali BARIN
  • 1,870
  • 19
  • 22
  • Note: fetch is not supported by any of the IE versions, the latest Safari and the latest Firefox. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#Browser_compatibility – Jonathan Laliberte Jun 17 '18 at 23:25
  • @JonathanLaliberte I don't think ReadableStream is necessary for such a case. So I'd say all modern browsers (except IE) support it. Besides that, there is a polyfill for the browsers which don't support Fetch. https://github.com/github/fetch – Ali BARIN Jun 19 '18 at 07:12
  • 1
    great start, but we're missing the part where we can specify a subset of the returned page. I found a start on that bit in a [separate thread](https://stackoverflow.com/a/45688797/680920). – quickshiftin Oct 21 '19 at 01:10
  • I get document is not defined – Normajean Apr 02 '21 at 08:28
  • @Normajean could you please post a new question with some code snippets you have in use? – Ali BARIN Apr 02 '21 at 14:37
  • hey, thanks for responding. I just realised you have this in your client side js file, right? I was trying to write it in my node.js server file. I have a version of this working now – Normajean Apr 02 '21 at 14:43
  • Yes, this code is designated for browsers. As there is no DOM available on the server-side, this snippet will not be directly working. – Ali BARIN Apr 03 '21 at 08:21
6

While I was trying to solve the same problem, I made this which is based on Ali BARIN's answer, and seems to work great but is a bit more explicit version, adding init information, and has some logic to use document.getElementById instead of querySelector.

/*
 * Replicates the functionality of jQuery's `load` function, 
 * used to load some HTML from another file into the current one.
 * 
 * Based on this Stack Overflow answer:
 * https://stackoverflow.com/a/38132775/3626537
 * And `fetch` documentation:
 * https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
 * 
 * @param {string} parentElementId - The ID of the DOM element to load into
 * @param {string} htmlFilePath - The path of the HTML file to load
 */
const loadHtml = function(parentElementId, filePath) {
    const init = {
        method : "GET",
        headers : { "Content-Type" : "text/html" },
        mode : "cors",
        cache : "default"
    };
    const req = new Request(filePath, init);
    fetch(req)
        .then(function(response) {
            return response.text();
        })
        .then(function(body) {
            // Replace `#` char in case the function gets called `querySelector` or jQuery style
            if (parentElementId.startsWith("#")) {
                parentElementId.replace("#", "");
            }
            document.getElementById(parentElementId).innerHTML = body;

        });
};
Phrancis
  • 2,222
  • 2
  • 27
  • 40
  • How do you access document in document.getElementById(parentElementId).innerHTML = body from server side? I get document is not defined.. – Normajean Apr 02 '21 at 08:25
0

You can do it like that, but there is something you'll have to pay attention to it.

const getData = (url) => {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = function () {
      if (this.readyState === 4 && this.status === 200) {
        resolve(this.responseText);
      } else {
        reject(this.responseText);
      }
    };
    request.open("get", url, true);
    request.send();
  });
};

getData("Your URL")
  .then((resolve) => {
    console.log(resolve);
  })
  .catch((reject) => {
    console.error(reject);
  });

What I want you to pay attention to is if you put URL to a page it will return it from <html> to </html> as string, I guess there is no way to get just apart from it like method .load() in jQuery.

Boulanfad Mustapha
  • 153
  • 1
  • 9