Getting blank screen.
I have to insert a employee card inside a div with id="container" with info from JSON file . I have done styling in 'emp' class.
load();
function load()
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var emp=JSON.parse(xhttp.responseText);
for(var i=0;i<emp.length;i++){
var d=document.createAttribute('div');
d.className='emp';
d.innerHTML="Inforamtion";
var c=document.getElementById('container')
c.appendChild(d);
}
}
};
xhttp.open("GET", "employee.json", true);
xhttp.send();
}
You need to use var d=document.createElement('div'); instead of createAttribute(). If you open the console in the browser after running your current code it will say something like (this is in Firefox) "Uncaught DOMException: Node.appendChild: May not add an Attribute as a child".
Related
I am trying to make a landing page with json. I am trying to have it so when someone clicks it goes to a page from the json file. So far I have this:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200)
{
var Link = JSON.parse(this.responseText);
document.getElementById("Link1").innerHTML = Link.title;
}
};
xmlhttp.open("GET", "link.json", true);
xmlhttp.send();
function click1(){
window.location.href = Link.link;
}
And when I click on it it gives me (from console):
(index):22 Uncaught ReferenceError: Link is not defined at click1 ((index):22) at HTMLAnchorElement.onclick ((index):8)
Assuming your JSON content has properties title and link, and that your click1 handler has been properly registered, you should be able to combine what you have into something like this:
function click1() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var Link = JSON.parse(this.responseText);
document.getElementById("Link1").innerHTML = Link.title;
window.location.href = Link.link;
}
};
xmlhttp.open("GET", "link.json", true);
xmlhttp.send();
}
Note that setting the innerHTML of an element before window.location.href = Link.link; is somewhat pointless because updating window.location will cause a new page to load.
I have an AJAX call whose reponse will feed some HTML into a DIV's innerHTML.
The response can contain images, and I'd like to have all these images loaded before my custom loading-div will hide.
I want to do this in vanilla JS. Unfortunately every question I've found here so far does it via jQuery.
I've tried adding an onload Event Listener to both the DIV and the xhttp object, but neither works. The loader disappears as soon as the HTML code is received and inserted, and then the user can witness each image loading individually.
document.getElementById("pageloader").className = "fadein";
var poststring = "&page="+encodeURIComponent(page);
var xhttp = new XMLHttpRequest();
xhttp.addEventListener("load", function() {
document.getElementById("pageloader").className = "fadeout";
});
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("content").innerHTML = this.responseText;
}
};
xhttp.open("POST", "myajax.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(poststring);
<div id="import" includeHTML="page.html"></div>
function getInclude() {
var x = document.getElementById("import").includeHTML; //returns 'undefined'
alert(x);
}
function modInclude() {
document.getElementById("import").includeHTML = "page2.html"; //does nothing and FF's console outputs nothing
}
I'm working on a project using W3's Import HTML and I would like to change the imported page using Javascript. No problem there, I thought it would be the same as changing the source of an image.
The syntax I tried didn't work. I did a little investigating and found out that the property itself returns 'undefined', which is a little strange considering it imports the page like it should.
Probably you could use:
document.getElementById("import").setAttribute("w3-include-html", "contentYouWant.html");
Edit: I took w3 documentation of that w3-html-include and add a simple snippet you could check to understand what is really happening. Snippet only change the attribute and alert to ensure it has been changed. Weird :'D Function is from official docs.
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
};
</script>
<div id="inc" w3-include-html="page1.html"></div>
<script>
includeHTML();
alert("Includes: " + document.getElementById("inc").getAttribute("w3-include-html"));
document.getElementById("inc").setAttribute("w3-include-html", "page2.html");
alert("Includes: " + document.getElementById("inc").getAttribute("w3-include-html"));
</script>
Cheers
I'm reading a text file into with a temporary email address and let this snippet built a HTML link.
<script>
//<![CDATA[
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementsByClassName('temporary_email')[0].innerHTML = "Email";
}
};
xhttp.open("GET", "/temporary_email.txt", true);
xhttp.send();
//]]>
</script>
The whole thing works as expected and I can just place <span class="temporary_email"></span> anywhere and get a link.
The problem: it seems I can only fetch this one time; if I have a mailto: link in the body and another one in my footer the script won't work. So, I figure this isn't actually a variable and me being a JS noob is the real problem.
PS: I'm trying to avoid jQuery. Tried a few dummy workarounds like duplicating the script and assigning another name for document.getElementsByClassName, but nothing. Basically I'm working for a quick and dirty fix until I know enough JavaScript to do this properly.
The reason you're only getting the JS appended to the first instance of the class name match, is because document.getElementsByClassName() returns an array of matched elements.
By using document.getElementsByClassName('temporary_email')[0], you're only ever going to select the first matched element.
You'd need to update to the following code:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var elements = document.getElementsByClassName('temporary_email');
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "Email";
}
}
};
xhttp.open("GET", "/temporary_email.txt", true);
xhttp.send();
Here's a basic fiddle.
This way, you're iterating trough the array, and each one you're changing the innerHTML to what you need. Plus, no jQuery!
you could iterate over your temporary_email links and update each of them:
Array.from(document.getElementsByClassName('temporary_email'))
.forEach(function(el){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
el.innerHTML = "Emai l";
}
};
xhttp.open("GET", "/temporary_email.txt", true);
xhttp.send();
})
I am working on getting a dynamic page set up on my site where clicking a "More Info" button triggers a loadBCW.js script which updates a <div>'s innerHTML using a text file saved elsewhere. I've got that working perfectly using this loadBCW.js:
document.getElementById("loadBCW").addEventListener('click',function(){
var url = "/wp-content/themes/DICE/js/descriptionBCW";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
document.getElementById("demo").innerHTML = url;
}, false);
My issue is, when I click one of the "More Info" buttons in order to change the <div>'s innerHTML, it will flash the variable url in the <div>, then the correct elements overwrite it.
How can I instruct js to NOT flash the variable url onscreen before actually updating the <div>?
Maybe get rid of the code that sets the div content to be the URL in the first place? I've commented out the line you should remove:
document.getElementById("loadBCW").addEventListener('click',function(){
var url = "/wp-content/themes/DICE/js/descriptionBCW";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
// document.getElementById("demo").innerHTML = url;
}, false);
You're making an asynchronous request to an external source, so the code inside the xhttp.onreadystatechange won't run until the file was successfully retrieved. There's not really anything you can do about this other than optimize your site to run faster than . So if you don't want the URL to be visible, there's no point in setting it in the first place.
However, this would be even worse if it was a sync request, as not only will it slow you performance, but since document.getElementById("demo").innerHTML = url; is after your function, it is guaranteed to end by replacing the content with the URL.