Here's my sample XML code:
<?xml version="1.0" encoding="UTF-8"?>
<entry n="5">
<form type="lemma">hi
<orth xml:lang="syc">ܐܳܐܱܪ</orth>
</form>
<gramGrp>
<gram type="pos">noun</gram>
<gram type="gender">commonGender</gram>
</gramGrp>
<etym>
<lang>Greek</lang>
<mentioned>ἀήρ</mentioned>
</etym>
<form type="inflected" ana="#n_pl">
<orth xml:lang="syc">ܐܰܐܷܪ̈ܰܣ</orth>
</form>
<sense>
<cit type="translation" xml:lang="en">
<quote>air, breeze</quote>
</cit>
</sense>
</entry>
I need to display this in a formatted fashion, depending on the tags. I've followed the code as found at w3schools http://www.w3schools.com/xml/xml_applications.asp, changing the filename and TagName values as necessary. In the end... nothing happens, just a blank screen. I do have a server from which I am running this, btw.
Javascript:
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp);
}
}
xmlhttp.open("GET", "dict.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("entry");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("lemma")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("sense")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
I will worry about getting all the formatting correct and all the tags represented afterwards, I just need to get it working at all, first.
Related
I am trying to make an XML parser, but I am having difficulties loading local files.
The issue being that when I try to load from my local drive it will still look for the file on the same domain. And the error I am receiving is this.
Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/Users/username/Documents/catalog.xml
HTML/JS: (http://jsfiddle.net/5dfhz40j/)
<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
<body>
<button type="button" onclick="loadDoc()">Load</button>
<br><br>
<table id="myTable"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xmlFunction(this);
}
};
xhttp.open("GET", "/Users/username/Documents/catalog.xml", true);
xhttp.send();
}
function xmlFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Category</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("ITEM");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("myTable").innerHTML = table;
}
</script>
</body>
</html>
XML file:
<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
<ITEM>
<TITLE>TITLE01</TITLE>
<CATEGORY>CAT01</CATEGORY>
<ID>ID01</ID>
</ITEM>
<ITEM>
<TITLE>TITLE02</TITLE>
<CATEGORY>CAT02</CATEGORY>
<ID>ID02</ID>
</ITEM>
<ITEM>
<TITLE>TITLE03</TITLE>
<CATEGORY>CAT03</CATEGORY>
<ID>ID03</ID>
</ITEM>
<ITEM>
<TITLE>TITLE04</TITLE>
<CATEGORY>CAT04</CATEGORY>
<ID>ID04</ID>
</ITEM>
<ITEM>
<TITLE>TITLE05</TITLE>
<CATEGORY>CAT05</CATEGORY>
<ID>ID05</ID>
</ITEM>
</CATALOG>
Expected output:
The error means you are trying to load the file from JSFiddle but it does not exist on JSFiddle and it has no access to your local files because the origin is not the same look up CORS.
Therefore, your code should run fine on your machine and give the desired output if the file exits at that path.
OR
Loaded as an external public file (am using a file from github here):
Run code Snippet
OR
See working Plunkr
var xmlFile = 'https://raw.githubusercontent.com/olayenca/externals/master/XMLParse.xml';
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", xmlFile, true);
xhttp.send();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
xmlFunction(this.response);
}
};
}
function xmlFunction(xml) {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xml, "text/xml");
var table = "<tr><th>Category</th><th>Title</th><th>Subcategory</th></tr>"; //subcategory heading
var x = xmlDoc.getElementsByTagName("ITEM");
for (var elem of x) {
var titles = elem.getElementsByTagName(
"TITLE")[0].childNodes[0].nodeValue;
var cats = elem.getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue;
var subCats = elem.getElementsByTagName("SUBCATEGORY").length === 0 ? "..." : elem.getElementsByTagName("SUBCATEGORY")[0].childNodes[0].nodeValue;
table += "<tr><td>" + cats + "</td><td>" + titles + "</td><td>" + subCats + "</td></tr>";
}
document.getElementById("myTable").innerHTML = table;
}
loadDoc();
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
<table id="myTable"></table>
So I'm creating a search website where the user enters a part of a name or a full name and then presses a button. And based on the string entered, it displays a hint of names of actors that contain the string or sub-string. The names are stored in a mysql database.
I was able to accomplish all of that by using ajax to interact with php and php to interact with mysql database. However, if the user enters nothing, it's supposed to display nothing.
So I though of just deleting all names when the field text is empty (in other words, I just delete all p elements of a div).
That's where the problem is. Even though I used element.removeChild(), It doesn't delete anything. Instead, even when the string is empty and the user presses the button, it keeps the same info from the previous search. I already searched on similar questions about removeChild(), but none of the answers or hints I found have worked for me.
Here is the javascript and html code below.
var array = [];
var str = "";
var clicked_id = "";
var body = document.getElementsByTagName('BODY')[0];
var actors = document.getElementById('actors');
var roles = document.getElementById('roles');
actors.addEventListener("click", function(){
getData(this.id);
}, false);
roles.addEventListener("click", function(){
getData(this.id);
}, false);
function getData(myid) {
str = document.getElementById('mytext').value;
clicked_id = myid;
var id = "roles";
console.log(clicked_id);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
array = JSON.parse(xmlhttp.responseText);
var element = document.createElement('div');
element.id = "mydiv";
if (str == "" && element.hasChildNodes() != null) {
while (element.hasChildNodes()) {
element.removeChild(element.lastChild);
}
} else {
for (var i = 0; i < array.length; i++) {
var p = document.createElement('p');
p.append(array[i]);
element.append(p);
}
body.append(element);
}
}
};
xmlhttp.open("GET", "controller.php?q="+str , true);
xmlhttp.send();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h2>Search for either all roles or all actors in the database imdb_small</h2>
<hr> Search string <br>
<input type="text" id="mytext"> <br>
<input type="button" value="Actors" id="actors">
<input type="button" value="Roles" id="roles" > <br> <br>
<hr> <br><br>
</body>
<?php
$servername="localhost";
$username="root";
$password="";
$dbname="demon";
//CREATE CONNECTION
$conn=new mysqli($servername,$username,$password,$dbname);
//CHECK CONNECTION
if ($conn->connect_error)
{
die("connection failed:".$conn->connect_error);
}
$sql="delete from category where SUBCATEGORY_ID='".$_GET["id"]."'";
$result=$conn->query($sql);
if ($result===TRUE)
{
echo"RECORD DELETED SUCCESSFULLY";
}
else
{
echo "ERROR:".$sql."<br>".$conn->error;
}
$conn->close();
?>
var array = [];
var str = "";
var clicked_id = "";
var body = document.getElementsByTagName('BODY')[0];
var actors = document.getElementById('actors');
var roles = document.getElementById('roles');
actors.addEventListener("click", function(){
getData(this.id);
}, false);
roles.addEventListener("click", function(){
getData(this.id);
}, false);
function getData(myid) {
str = document.getElementById('mytext').value;
clicked_id = myid;
var id = "roles";
console.log(clicked_id);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
array = JSON.parse(xmlhttp.responseText);
// Check for an existing mydiv first here, before creating a new one
// If it exists then get it and check its child nodes
var element = document.getElementById('#mydiv');
element = element ? element : document.createElement('div');
element.id = "mydiv";
if (str == "" && element.hasChildNodes() != null) {
while (element.hasChildNodes()) {
element.removeChild(element.lastChild);
}
} else {
for (var i = 0; i < array.length; i++) {
var p = document.createElement('p');
p.append(array[i]);
element.append(p);
}
body.append(element);
}
}
};
xmlhttp.open("GET", "controller.php?q="+str , true);
xmlhttp.send();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h2>Search for either all roles or all actors in the database imdb_small</h2>
<hr> Search string <br>
<input type="text" id="mytext"> <br>
<input type="button" value="Actors" id="actors">
<input type="button" value="Roles" id="roles" > <br> <br>
<hr> <br><br>
</body>
I'm trying to use JavaScript to display data from an XML file. My data isn't being displayed to the web page and I'm not sure why.
Any help/advice would be appreciated. My code is displayed below.
NOTE - I have no experience with XML so be aware that I am completely new to it.
<script>
var xmlData;
function loadXml () {
var filename = "CDLibrary.xml";
var XMLhttp = new XMLHttpRequest();
XMLhttp.open("GET", filename, true);
var ok = true;
try {
XMLhttp.send();
}
catch(err) {
ok = false;
alert ("Database not found");
}
if (ok) {
xmlData = XMLhttp.responseXML;
displayXml(xmlData);
}
}
function displayXml () {
var CdElements;
var CdTitle;
var count;
CdElements = xmlData.getElementsByTagName("CD");
for (count = 0; count < CdElements.length; count=count+1) {
CdTitle = CdElements[count].getElementsByTagName("title");
document.getElementById("output").innerHTML = document.getElementById("output").innerHTML + CdTitle[0].childNodes[0].nodeValue + "</br>";
}
}
</script>
</head>
<body>
<div>
<p id="output">
</p>
<p id="buttons">
<input type="button" id="btnDisplay" value="Display CDs" onclick="loadXml();">
</div>
</body>
<html>
<head><title>Import XML Data</title></head>
<body>
<div>
<p id="output">
</p>
<p id="buttons">
<input type="button" id="btnDisplay" value="Display CDs" onclick="loadXml()">
</div>
<script>
var xmlData;
function loadXml () {
var filename = "CDLibary.xml";
var XMLhttp = new XMLHttpRequest();
XMLhttp.open("GET", filename, true);
var ok = true;
try {
XMLhttp.send();
}
catch(err) {
ok = false;
alert ("Database not found");
}
if (ok) {
xmlData = XMLhttp.responseXML;
displayXml(xmlData);
}
}
function displayXml(xmlDataBase) {
var CdElements;
var CdTitle;
var count;
CdElements = xmlDataBase.getElementsByTagName("CD");
for (count = 0; count < CdElements.length; count=count+1) {
CdTitle = CdElements[count].getElementsByTagName("title");
document.getElementById("output").innerHTML = document.getElementById("output").innerHTML + CdTitle[0].childNodes[0].nodeValue + "</br>";
}
}
</script>
</body>
</html>
You're not using the var xmlData instead you're using a var xmlDataBase. Replace you code to:
CdElements = xmlData.getElementsByTagName("CD");
And since you're using a global var xmlData, it's available inside displayXml function, in this case no need for function displayXml(xmlDataBase) if you use function displayXml() it'll be enough.
Using the w3schools link and changing some information and changing the directory I got it working. There must be an error in the template i was following, thank you all for your time and efforts.
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
<body>
<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "CDLibrary.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("performer")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
I am just trying to prototype a simple functionality using javascript for learning purpose, but the contents within the <p> tag are not updating and I am stuck at this point. My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title> Ajax Search Box </title>
<script>
function LoadList()
{
var searchBox = document.getElementById("txtSearch");
var resultBox = document.getElementById("results");
var searchedChars = "";
var xHttp = new XMLHttpRequest();
searchedChars += searchBox.value;
xHttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200)
{
var xmlContent = this.responseXML;
var nameList = xmlContent.getElementsByTagName("name");
var dispText = "";
for(var i = 0 ; i < nameList.length ; i++)
{
dispText += nameList[i].textContent + "<br/>";
}
resultBox.innerHtml = dispText;
}
};
xHttp.open("GET","AssessorList.xml",true);
xHttp.send();
}
</script>
</head>
<body>
<input id="txtSearch" type="text" placeholder="Search" onkeyup="LoadList();" />
<p id="results">
No Data Available.
</p>
</body>
</html>
Could someone tell me why the innerHtml is not updating? Thanks in advance.
P.S: The code is fetching the data from the xml file as I could see in browser's console, the values being passed to the dispText variable.
<!DOCTYPE html>
<html>
<body>
<input id="txtSearch" type="text" placeholder="Search" onkeyup="LoadList();" />
<p id="results">No data available</p>
<script>
function LoadList() {
var xhttp = new
XMLHttpRequest();
var searchBox =
document.getElementById("txtSearch");
var resultBox = document.getElementById("results");
var searchedChars = "";
searchedChars += searchBox.value;
xhttp.onreadystatechange = function() {
//alert(this.status);
if (this.readyState == 4 && this.status == 200) {
var xmlContent = this.responseXML;
var nameList = searchedChars;
alert(nameList);
var dispText = "";
for(var i = 0 ; i < nameList.length ; i++)
{
dispText += nameList[i] + "<br/>";
}
resultBox.innerHTML = dispText;
}
};
xhttp.open("GET", "ajax.txt", true);
xhttp.send();
} </script>
</body>
</html>
Hope this may help you
I'm very new to HTML.
I am trying to load an XML which contains image names and display it in a div dynamically.
I can see the image names but can't assing img a source.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (window.XMLHttpRequest) {xmlhttp=new XMLHttpRequest();}
else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.open("GET","resimler.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("pic");
i=0;
function displayFoto(){
ad=(x[i].getElementsByTagName("ad")[0].childNodes[0].nodeValue);
document.getElementById("showFoto").innerHTML="img/" + ad;}
function next(){
if (i<x.length-1){
i++;
displayFoto();}}
function previous(){
if (i>0){
i--;
displayFoto();}}
</script>
</head>
<body onload="displayFoto()">
<div id='showFoto'><img id='showFoto'></img></div><br>
<input type="button" onclick="previous()" value="<<" />
<input type="button" onclick="next()" value=">>" />
</body>
</html>
Can anyone please guide me?
document.getElementById("showFoto").src="img/" + ad;
this would help you to load image but i dont garanty about rest of the code. You better look for Loader frameworks and jquery.
I agree with Kemal, just give a snipet of your xml and also the id for div and img tag is same, is that something you are unaware of it or just intentional
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
xmlDoc = xmlhttp.responseXML;
var Image = "";
x = xmlDoc.getElementsByTagName("IMAGE");
for (i = 0; i < x.length; i++)
{
Image = Image + x[i].childNodes[0].nodeValue + " ";
var res = Image.split(" ");
var ii = res[i];
var img = document.createElement("img");
img.src = ii;
img.width = 150;
img.height = 100;
document.body.appendChild(img);
}
}
}
xmlhttp.open("GET", "ll.xml", true);
xmlhttp.send();
}
</script>
</head>
<body onload="loadXMLDoc()">
</body>