Equivalent to $.load without jQuery – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and jquery. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about Equivalent to $.load without jQuery.
Problem :
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?
Solution :
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.
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;
});
};
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.