How can i show excel value in a html page
within a table, and to be interactive,
when even i change the value in excel, it will save XML file,
and i want the HTML to read the new value from that XML file,
and show it in the table.
lets say, i have in excel
table 2 by 2
name, vlad
age, 29
found an example for how to load xml data to html, but its not readig my xml file that created from excel.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "db_from_excel.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
I think i found the issue, when i opened the same code in firefox, it displayed all the values from xml.
But, not working in chrome.... why is that ?
Related
Good day! I'm new to web development and still studying.
I'm trying to create a simple counter using javascript.
index.html
<script src="test.js"></script>
<h1>Count </h1>
<p id="count">0</p>
<button onclick ="mycounter()">Add Count</button>
test.js
var counter = 0;
function mycounter(){
counter = counter + 1;
document.getElementById('count').innerHTML = counter;}
Now this code works perfectly fine. Is it possible to transfer that button to another html file and everytime that button is clicked from the other file, the count display on my index is updated?
Any help would be much appreciated. Thank you.
If you want to transfer part of your html in to another file and use it in a separate file, that is called templating. The usual pattern is to load the contents of the "other" file via XHR and add it to the DOM.
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("buttonholder").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
I'm making my own website(https://khushit-shah.github.io/) with the help of github.dev.
Now on top of every repository, I wanted to show some content featuring the repository, which should be flexible and easily changeable. So, I created a file in repository named "repodesc.html". which contains the html to we shown!. Then using following code I am adding that html file for every repositories.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("{{ repository.id }}").innerHTML = this.responseText;
}
};
xhttp.open("GET", "https://raw.githubusercontent.com/khushit-shah/{{ repository.name }}/master/repodesc.html", true);
xhttp.send();
This adds the HTML in https://raw.githubusercontent.com/khushit-shah/Cursor.js/master/repodesc.html to my website(top of Cursor.js). But the script tag in the repodesc is not getting executed.
Code in repodesc.html
<h1 cursor-animate cursor-loop-reverse> Cursor.js </h1>
<script>
console.log("Is it working?");
js = "https://raw.githubusercontent.com/khushit-shah/Cursor.js/master/cursor-v.2.0.2.js";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
eval(this.responseText);
}
};
xhttp.open("GET", js, true);
xhttp.send();
</script>
I even tried repodesc.html
<h1 cursor-animate cursor-loop-reverse> Cursor.js </h1>
<script src="https://cdn.jsdelivr.net/gh/khushit-shah/Cursor.js#latest/cursor.v1.0.0.min.js" >
</script>
expected result : Cursor.js should be executed and the h1 tag should be animated with type writing effect!
actual result: the script in repodesc.html is not getting executed!
I want to parse a JSON object response.indexText which contains HTML tags (validated with JSONLint).
{
"indexText": "<div id=\"content-home\"><h1> Hello World! <\/h1> <p>Some text.<\/p><p>Some more text.<\/p></div>"
}
into <div id="indexText"></div>
But when I use (EDIT after first answer. window.onload inside and outside does not change the problem.)
window.onload = function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let response = JSON.parse(xhttp.responseText);
document.getElementById("indexText").innerHTML = response.indexText;
}
};
xhttp.open("GET", "./json/en.json", true);
xhttp.send();
};
and reload the page it will be empty. What is going wrong? How can I parse the JSON content such that the client will render the content as HTML?
What I am trying to do. At the moment my page consists of multiple *.html files. All pages have the same navigation bar and the same footer. Only the content does change. Now I am trying to store the content inside of my JSON file such that I can change the text when clicking navigation links.
Put your code inside window.onload and you will get your required result.
Check the below working code:
window.onload = function() {
var response = {
"indexText": "<div id=\"content-home\"><h1> Hello World! <\/h1> <p>Some text.<\/p><p>Some more text.<\/p></div>"
};
document.getElementById("indexText").innerHTML = response.indexText;
};
<div id="indexText"></div>
Working JSfiddle here : https://jsfiddle.net/y2rkhp8g/1/
I am new to html and javascript. I have been trying to parse and access the data of an xml file through the javascript code. Presently it is showing null. I am posting my codes below. Please have a look and do help.
Html code:
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<p id="demo"></p>
<script>
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "http://10.21.64.222/LoadBreakSwitch/LBS_Commands.xml", true);
xhttp.send();
function myFunction(xml) {
var x, i, txt, xmlDoc;
xmlDoc = xml.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("Ping");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
The xml file:
<?xml version="1.0" encoding="utf-8"?>
<LBSCommands>
<Ping Commkey="A3070000AA00A4" Value="A309008001043101A4"/>
<Frequency Commkey="A3070300AD00A4" CommValue="A309038001013101A4"/>
<SwitchStatus Commkey="A3071D01C800A4" CommValue="A3091D8101014C01A4"/>
</LBSCommands>
I'm not sure what exactly you mean by "it is showing null", but maybe changing your code to using onload callback would help:
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onload = function() {
myFunction(this);
};
Also, this line: txt += x[i].childNodes[0].nodeValue + "<br>"; will throw an exception since childNodes[0] is undefined in your XML document.
EDIT:
To make x[i].childNodes[0] non-null, you must move the desired attribute to be the child element's text value. For instance, if you replace:
<Ping Commkey="A3070000AA00A4" Value="A309008001043101A4"/>
with:
<Ping>
<Commkey key="A3070000AA00A4">
A309008001043101A4
<Commkey/>
<Ping/>
(and do the same to the rest of the elements) then you'll have something like:
<p id="demo">
A309008001043101A4<br>
A309038001013101A4<br>
A3091D8101014C01A4<br>
</p>
as your HTML.
If that's not the exact HTML outcome you want please show an example HTML so I'll be able to help.
I am trying to update certain attributes of my xml file using javascript.
I am able to set new value by calling setAttribute() method, but unable to reflect it in the physical file.
I am very much new to html javascript. Please help.
Below I am posting my HTML as well as xml file code.
Html code:
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<p id="demo"></p>
<script>
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "http://10.21.64.222/LoadBreakSwitch/vbn.xml", true);
xhttp.send();
function myFunction(xml) {
var x, i, txt, xmlDoc;
xmlDoc = xml.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("Ping");
x[0].setAttribute("CommValue","1122222");
txt +=x[0].getAttribute("CommValue")+"<br>";
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
xml file code:
<?xml version="1.0" encoding="utf-8"?>
<LBSCommands>
<Ping Commkey="A3070000AA00A4" CommValue="A309008001043101A4"/>
<Frequency Commkey="A3070300AD00A4" CommValue="A309038001013101A4"/>
<SwitchStatus Commkey="A3071D01C800A4" CommValue="A3091D8101014C01A4"/>
<SwitchLockStatus Commkey="A3071E01C900A4" CommValue="A3091E8101004C01A4"/>
<SetFrequency01 Commkey="A308130001BF00A4" CommValue="A309038001013101A4"/>
</LBSCommands>