<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
Related
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".
How do I stop this --!DOCTYPE html-- with two scripts in it from running on mobile devices?
Hiding the div with the URL in it does not work, so apparently stopping one or both of the scripts is necessary. Thanks!
<!DOCTYPE html>
<html>
<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-left-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-left-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
};
</script>
<body>
<div w3-include-left-html="borders/border-left.html"></div>
<script>
includeHTML();
</script>
</body>
</html>
Detect a mobile browser using one of the methods here:
Detecting a mobile browser
If detected, return immediately.
Eg
<script>
function includeHTML() {
if (mobilecheck()) {
return;
}
... code to run on desktops only
</script>
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();
})
When using this code no CSS/Javascript works (It just loads the HTML):
function functionName(limit) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var text = xhttp.responseText;
document.getElementById("content").innerHTML = "";
document.getElementById("content").innerHTML = text;
}
}
xhttp.open("GET", "?x=test&limit=" + limit, false);
xhttp.send();
}
When using jQuery CSS/Javascript works, now the problem is that the page scrolls up when loading the content.
$('#content').load('?x=test&limit=" + limit);
What I want is a way to load an URL to a DIV, where CSS and Javascript works.
And like .innerHTML I want to load the content without scrolling to the top.
Hope for help, yesterday i googled for 6-8 hours, and im a google-fu guru =)
Still got the same problem!
When using XMLHttpRequest and .innerHTML it loads the HTML (without scrolling up to the start of the div). But no Javascript or CSS works...
And with this it loads Javascript and CSS when .load'ing. But it scrolls up to the start of the div.
$('#content').load("?x=test&limit=" + limit);
function functionName(limit) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var ele = document.createElement("script");
ele.src = "js/some-js-ajax.js";
document.body.appendChild(ele);
var text = xhttp.responseText;
document.getElementById("content").innerHTML = "";
document.getElementById("content").innerHTML = text;
}
}
xhttp.open("GET", "?x=test&limit=" + limit, false);
xhttp.send();
}
When adding:
var ele = document.createElement("script");
ele.src = "js/some-js-ajax.js";
document.body.appendChild(ele);
.innerHTML works with CSS and Javascript, but now it scrolls up to the start o fthe div again. Not staying in the scrolled place where you were before the functionName(limit) load ....
Using this code below I can load an HTML page to a div, in my site, by clicking a link in my menu.
Now, the problem is that when it loads the HTML page into the div, it loads just fine... but without its original background color that should be loaded with the other content of the HTML page as well. All the other CSS elements seem to be just fine.
Thank you in advanced.
js code:
function processAjax(url)
{
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = targetDiv;
try {
req.open("GET", url, true);
}
catch (e) {
alert(e);
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = targetDiv;
req.open("GET", url, true);
req.send();
}
}
return false;
}
function targetDiv() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById("containerDiv").innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
html:
<a onclick="return processAjax(this.href)" href="example.html">CLICK ME</a>
<div id="containerDiv"></div>
Get the style element from the page and append it to the head:
var styles = document.getElementsByTagName('style');
var head = document.getElementsByTagName('head')[0];
for(var x = 0; x < styles.length; x++){
head.appendChild(styles[x]);
}
Edit:
You want to set the returned html as an element first:
var div = document.createElement('div');
div.innerHTML = req.responseText;
var styles = div.getElementsByTagName('style');
for(var x = 0; x<styles.length;x++){
document.getElementsByTagName('head')[0].appendChild(styles[x]);
}
Use the new code, not the old, and put it in the if(reg.status == 200) block.
Change .innerHTML to .html, or just use .load(req.responseText)
.innerHTML overwrites everything I believe. You just want to change a section.