Update the changed value in the physical XML File - javascript

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>

Related

How to get an xml value from an API

I'm trying to display some value that is incorporated in an API (This api is used by a program called PRTG to extract information from the program), this is the API
http://192.168.1.65/api/table.xml?content=channels&output=xml&columns=name%2Clastvalue_&id=1234&username=someguy&password=notmypassword
this API give's you an xml file that looks like this.
<?xml version="1.0" encoding="UTF-8"?>
<channels totalcount="0" listend="1">
<prtg-version>16.4.27.6720</prtg-version>
<item>
<name>Tiempo de inactividad</name>
</item>
<item>
<name>Voltaje Bateria</name>
<lastvalue>54,51 VDC</lastvalue>
<lastvalue_raw>0000000000054510.0000</lastvalue_raw>
</item>
</channels>
I want to take the value in the tag lastvalue and display it in a webpage, I have tried using javascript but nothing works at all
I suspect you need JavaScript because result should display on the page. If you calling API just change that ajax part and everything should work. To mimic some response from API I have done this over the file.
<html>
<head>
<title>Demo</title>
</head>
<body>
<p id="result"></p>
<script>
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "channels.xml", true);
xhttp.send();
function myFunction(xml) {
var x, i, txt, xmlDoc, node;
xmlDoc = xml.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("item");
for (i = 0; i < x.length; i++) {
node = x[i].getElementsByTagName('lastvalue');
if (node && node.length > 0){
txt += node[0].textContent + "<br>";
}
}
document.getElementById("result").innerHTML = txt;
}
</script>
</body>
</html>

Xml Dom parsing returning null

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.

how to show xml file from excel in HTML table?

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 ?

Ajax implementation using javascript

I want to implement a simple AJAX script which tries to display data stored in a xml file. I tried this following code but on press of the button the page seems static and nothing responds back. The script doesn't display the xml contents.
<!DOCTYPE html>
<html>
<head>
<title>XML</title>
<script>
function myfun() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else {
req = new ActiveXObject("Microsoft.req");
}
req.onreadystatechange = function() {
if (req.readyState === 4 && req.status === 200) {
document.getElementById("myid").innerHTML = req.responseText;
}
}
//req.overrideMimeType('text/xml');
req.open("GET", "myxml.xml", true);
req.send();
}
</script>
</head>
<body>
<div id="myid">This will change</div>
<input type="button" value="submit" onclick="myfun()" />
</body>
</html>
XML:
<?xml version="1.0" encoding="UTF-8" ?>
<student>
<id>100</id>
<name>tamizh</name>
</student>

How do I save HTML form data to an XML file using JavaScript?

I am making a blog in which users can leave comments on my posts. I used JavaScript to read the data from the XML file and display it in a div element. However, I can't get the page to save new comments to the XML file, and then rewrite the div contents based on the changed XML file. I know how to edit the XML file, but how do I save it? (Sorry, the code's a little messy)
Source Code:
index.html:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<title>Blog</title>
<script src = "loadXML.js">
</script>
<script>
function addComment1(form)
{
var xmlDoc = loadXMLDoc("one.xml");
var use = form.user1.value;
var com = form.comment1.value;
}
</script>
<meta charset = "utf-8"/>
</head>
<body>
<h1>Posts</h1>
<br/>
<!-- A Post -->
<h2>Comments:</h2>
<div>
<p>
<script>
var xmlDoc = loadXMLDoc("one.xml");
var cap = xmlDoc.getElementsByTagName("content");
for (i = 0; i < cap.length; i ++)
{
document.writeln(xmlDoc.getElementsByTagName("user")[i].firstChild.nodeValue + ":<br/>");
document.writeln(xmlDoc.getElementsByTagName("content")[i].firstChild.nodeValue + "<br/><hr/>");
}
</script>
</p>
<form name = "form1">
<input type = "text" name = "user1"/>
<input type = "text" name = "comment1" />
<input type = "submit" value = "Submit" onclick = "addComment1(this.form)"/>
</form>
</div>
</body>
</html>
one.xml:
<?xml version="1.0" encoding="utf-8"?>
<comment>
<user>Gabe Rust</user>
<content>Hello World!</content>
</comment>
loadXML.js:
function loadXMLDoc(filename)
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // code for IE5 and IE6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
function loadXMLString(txt)
{
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
}
else // code for IE
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}
return xmlDoc;
}

Categories

Resources