Display XML values in HTML of a specific element or attribute - javascript

I need to from an HTML, get a specific element or attribute and some values thereof from an XML. So in the HTML, get http://ipaddress/files/devices.xml , find field that has attribute/element "Gmail SMTP" and disply its "status" attribute
then to add on maybe, create if statement to load image"online" if attribute "status" = on
XML Page:
<devices>
<device server_id="1">
<label>Server_test</label>
<status>on</status>
<last_check>2019-10-30 02:20:53</last_check>
</device>
<device server_id="2">
<label>Gmail SMTP</label>
<status>on</status>
<last_check>2019-10-30 02:20:53</last_check>
</device>
HTML script:
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "http://ipaddress/Controllers/cron/devices.xml",
true);
xmlhttp.send();
function myFunction(xml, i) {
var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("devices");
document.getElementById("Gmail SMTP").innerHTML =
"status:" +
x[i].getElementsByTagName("status")[0].childNodes[0].nodeValue +
"<br>label:" +
x[i].getElementsByTagName("label")[0].childNodes[0].nodeValue +
"<br>last check:" +
x[i].getElementsByTagName("last_check")[0].childNodes[0].nodeValue;
}
</script>

Related

XMLHttpRequest with php will not work

I've been trying to get this solved for 2 weeks now and still have no success.
JavaScript:
var quotenum = 0;
var xmlhttp = null;
var rt = "";
function ChangeQuote() {
quotenum++;
xmlhttp = null;
//alert("quotenum= "+quotenum);
if (quotenum === 0) {
document.getElementById("quote").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === XMLHttpRequest.DONE && xmlhttp.status === 200) {
rt = xmlhttp.responseText;
//alert("quote= "+rt);
alert("request number= " + xmlhttp.length);
document.getElementById("quote").innerHTML = rt;
}
};
xmlhttp.open("Get", "getquote.php?q=" + quotenum, false);
//xmlhttp.open("GET", "getquote.php?XDEBUG_SESSION_START=netbeans-xdebug&q=" + quotenum, false);
xmlhttp.send();
//var thediv = document.getElementById("quote");
return false;
}
PHP:
error_reporting(E_ERROR | E_PARSE);
$q="";
$q = intval($_GET['q']);
$link=mysqli_connect("localhost","root","sequence","babylon");
if (mysqli_connect_errno()){
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$query="SELECT quotetext FROM quote where quotenum='".$q."'";
$show=mysqli_query($link,$query) or die ("Error");
while($row=mysqli_fetch_array($show)){
echo $row["quotetext"];
}
Can anyone see anything wrong with this?
Using WAMP I can see the correct result when I run the PHP file in a browser.
I also try to use Jquery instead.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var quotenum = 0;
// var xmlhttp = null;
// var rt = "";
function ChangeQuote() {
quotenum++;
$.ajax({
url: "getquote.php?q="+quotenum,
method: "get",
data: {
q: quotenum
}
}).done(function (data) {
alert(data);
document.getElementById("quote").innerHTML = data.quotetext;
});
return false;
}
</script>
The only noticable error I see is you inlining your js with the script tag that has a src attribute.
HTML 4.01 Specification:
The script may be defined within the
contents of the SCRIPT element or in
an external file. If the src attribute
is not set, user agents must interpret
the contents of the element as the
script. If the src has a URI value,
user agents must ignore the element's
contents and retrieve the script via
the URI.

Retrieving all XML from nodes with Javascript

I'm trying to get the xml from nodes. Let's say I have an XML file:
<?xml version="1.0"?>
<story title="My title here">
<subject key="key1" caption="Intro">
Text here for subject 1. There might be an occasional <html> markup present.
<action tag="actiontag"/>
</subject>
<subject key="key2" caption="Chap1">
Text for chapter 2
<directions>
<dir go="chap5" to="Solving"/>
<dir go="chap12" to="Searching">
<extra1 subtitle="subtitle">You can expect extra text here as well.</extra>
<extra2 subtitle="subtitle2"/>
</dir>
<dir go="chap2,chap5" to="Finding"/>
</directions>
</subject>
<chapters key="chap1" caption="Chapter1">
The text for chapter1 goes here
<newtag>This one has text as well</newtag>
</chapters>
</story>
Now I'm trying to get the whole XML code including nodes and tags into an array of objects. So the result should ideally be:
subjects[0].key=key1
subjects[0].caption=Intro
subjects[0].txt=Text here for subject 1. There might be an occasional <html> markup present.<action tag="actiontag"/>
subjects[1].key=key2
subjects[1].caption=Chap1
subjects[1].txt=Text for chapter 2<directions><dir go="chap5" to="Solving"/><dir go="chap12" to="Searching"><extra1 subtitle="subtitle">You can expect extra text here as well.</extra><extra2 subtitle="subtitle2"/></dir><dir go="chap2,chap5" to="Finding"/></directions>
This 'text' can than later be processed as XML.
Now I've been able to read the XML and access the tags separately. I've been able to traverse through the file and get the text but I can't seem to loop through all the nodes/text/tags and keep it formatted as is.
What I have is:
var xmlDoc;
function loadxml() {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "assets/myfile.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
xmlhttp.onloadend = init(xmlDoc);
}
function init(xmlDoc) {
var subjects = [];
var x, i;
x = xmlDoc.getElementsByTagName('subject');
for (i = 0; i < x.length; i++) {
subjects.push({ key: x[i].getAttribute('key'), caption: x[i].getAttribute('caption'), txt: x[i].childNodes[0].nodeValue });
}
//just to check if there's something recorded..
document.getElementById("result").innerHTML = subjects[1].txt;
}
The array of objects is no problem, that works. But how do I change x[i].childNodes[0].nodeValue to hold all the childnodes of [subject] and keep accompanying tags and formatting?
Thanks for your time.
function loadxml() {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "assets/myfile.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
responseText = xmlhttp.responseText;
textNodes = responseText.split(/<subject.*>/);
textNodes.shift(); //remove first chunk of text
for (var i = 0; i < textNodes.length; i++) {
textNodes[i] = textNodes[i].replace(/\r?\n|\r/g, ''); //remove line breaks;
textNodes[i] = textNodes[i].replace(/^\s*/, ''); // Replace "> " with ">"
textNodes[i] = textNodes[i].replace(/>\s*/g, '>'); // Replace "> " with ">"
textNodes[i] = textNodes[i].replace(/\s*</g, '<'); // Replace "< " with "<"
}
xmlhttp.onloadend = init(xmlDoc, textNodes);
}
function init(xmlDoc, textNodes) {
var subjects = [];
var x, i;
x = xmlDoc.getElementsByTagName('subject');
for (i = 0; i < x.length; i++) {
subjects.push({ key: x[i].getAttribute('key'), caption: x[i].getAttribute('caption'), txt: textNodes[i] });
}
console.log(subjects);
}

Insert XML node value inside iframe src

Been trying everything and all i get is a blank page ...
The XML is provided by URL format and contains many nodes but i just want to take out the username and place it inside a iframe scr url.
optimal this will repeat for until no more usernames on that xml
Here is what i got so far
<script type="text/javascript">
if (window.XMLHttpRequest)
{
//Code for IE7,Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{
//code for IE6,IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "http://xml.url/here", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
y=xmlDoc.documentElement.childNodes;
for (i=0;i<y.length;i++)
{
if (y[i].nodeType!=3)
{
//This code for printing attribute of a tag(you have to give attribute name).
document.write("<br>" + y[i].getAttributeNode('username').nodeName + ": ");
document.write(y[i].getAttributeNode('username').nodeValue + "<br>");
for (z=0;z<y[i].childNodes.length;z++)
{
if (y[i].childNodes[z].nodeType!=3)
{
//This is for Node Name.
document.write(y[i].childNodes[z].nodeName + ": ");
//This is for Node Value.
document.write(y[i].childNodes[z].textContent + "<br>");
}
}
}
}
</script>
<iframe src="http://blablabla + 'username' + blablabla " height="300" width="400" style="border: none;"></iframe>

how to get specific information from url html source code

I am trying to get the information from a url links html source code onto another webpage which is in the same domain and get specific information from the html code, like getting the span id, and information from a <td>
and change the internal html code <span id="myspan"> here is my text </span>
to that of what I get.
the code I have below is not working, not sure why
function loadHTML(spanId, url) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 /* complete */) {
handler(xmlhttp.responseText, spanId);
}
}
}
function handler(responseText, spanId) {
var parser =new DOMParser();
var doc = parser.parseFromString(responseText, "text/html");
//get class name from parser
var status = doc.getElementsByTagName("tr");
var className = status[1].className;
//get the date/time from parser
var tds = doc.getElementsByTagName("td");
var dateTime = tds[0].innerText;
var span = document.getElementById(spanId);
span.id= className;
span.innerHTML = dateTime;
}
loadHTML('myspan',"any given url");
<span id="myspan"> here is my text </span>
after xmlhttp.onreadystatechange you need to call xmlhttp.send() to start the http request
correct code is here
function loadHTML(spanId, url) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 /* complete */) {
handler(xmlhttp.responseText, spanId);
}
}
}
// send() method actually initiates the ajax request
xmlhttp.send();
function handler(responseText, spanId) {
var parser =new DOMParser();
var doc = parser.parseFromString(responseText, "text/html");
//get class name from parser
var status = doc.getElementsByTagName("tr");
var className = status[1].className;
//get the date/time from parser
var tds = doc.getElementsByTagName("td");
var dateTime = tds[0].innerText;
var span = document.getElementById(spanId);
span.id= className;
span.innerHTML = dateTime;
}
loadHTML('myspan',"any given url");
<span id="myspan"> here is my text </span>

javascript dynamic content not affected when ajax call

I am new to javascript, am using PHP variable for created link dynamically as given below
$addlink = '<button class="blueBtn btnSmall" id="current'.$product_id.'" onClick=addcart('.#$product_id.',"add")><span class="allitem"
<font color="#A2F3AB">Added</font></span></button>';
This my php variable created by dynamically like below.
Added
Added
Added
I want to change the content of all variable“ added” as“ add” by just one click,Am using ajax function for changing that text as given below..
function clearcart(msg) {
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('cartreturn').innerHTML = xmlhttp.responseText;
document.getElementsByClassName('allitem').innerHTML = "Add";
}
}
xmlhttp.open("GET", "/addcart.php?msg=" + msg, true);
xmlhttp.send();
}
But first link text only affected.. other is not affected how I can solve this problem
document.getElementsByClassName returns a NodeList. You have to iterate over all the elements:
var allItems = getElementsByClassName('allitem');
for (var i = 0; i < allItems.length; i++) {
allItems[i].innerHTML = 'Add';
}
See this question.
You can't do document.getElementsByClassName('allitem').innerHTML.
You can do document.getElementsByClassName('allitem')[0].innerHTML = "Add"
Do you have several elements with the class "allitem"? If you don't, then maybe you should use an id, instead of a class, and then call document.getElementById('allitem').innerHTML = "Add";

Categories