Display XML children in HTML tabs - javascript

I am trying to display data from an XML code like this:
<escrutinio_sitio>
<resultados>
<numero_partidos>4</numero_partidos>
<partido>
<nombre>IU</nombre>
<electos>2</electos>
<electo1>AMADEU SANCHIS I LABIÓS</electo1>
<electo2>ROSA ALBERT BERLANGA</electo2>
<votos_numero>28489</votos_numero>
<votos_porciento>7,17</votos_porciento>
</partido>
<partido>
<nombre>COMPROMÍS-Q</nombre>
<electos>3</electos>
<electo1>JOAN RIBÓ CANUT</electo1>
<electo2>CONSOL CASTILLO PLAZA</electo2>
<electo3>MARIA PILAR SORIANO RODRIGUEZ</electo3>
<votos_numero>35881</votos_numero>
<votos_porciento>9,03</votos_porciento>
</partido>
</resultados>
</escrutinio_sitio>
for doing so, I have this JavaScript code which tries to obtain the nombre tag value into the title of different tabs, but it does not work as it should.
<script>
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","resultadosval.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<ul class="nav nav-tabs">");
var branch = xml_doc.getElementsByTagName("partido");
for(i=0;i<branch.length;i++) {
subbranch = branch[i].childNodes ;
for(j=0;j<subbrach.length;j++) {
if (subbranch[j].nodeName=="nombre" ){
document.write("<li class="active"><a href="#tab_a" data-toggle="tab">");
document.write(subbranch[j].childNodes[0].nodeValue);
document.write("</a></li>");}
}
}
document.write("</ul>");
</script>
What am I doing wrong?
Thank you

Observe the quotation marks "" and ''.. Please note that you had string breaks which throws the errors and script execution breaks. Due to which you seem to have a problem
<script>
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","resultadosval.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<ul class='nav nav-tabs'>");
var branch = xml_doc.getElementsByTagName("partido");
for(i=0;i<branch.length;i++) {
subbranch = branch[i].childNodes ;
for(j=0;j<subbrach.length;j++) {
if (subbranch[j].nodeName=="nombre" ){
document.write("<li class='active'><a href='#tab_a' data-toggle='tab'>");
document.write(subbranch[j].childNodes[0].nodeValue);
document.write("</a></li>");}
}
}
document.write("</ul>");
</script>

Related

Code seems to stop right after .responseXML. xmlDoc is null

<!DOCTYPE html>
<body>
<script>
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","docu.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
{
// This is where my alert indicates that xmlDoc = null
// then nothing else happens below.
document.getElementById("stuff")=xmlDoc.getElementsByTagName("details")
[0].childNodes[0].nodeValue);
}
</script>
<input type="text" name="stuff" id="stuff"/>
</body>
</html>
BELOW IS THE DOCU.XML STORED ON THE ROOT DIRECTORY
<?xml=version '1.0'?>
<root>
<details>xml data does not appear</details>
</root>

How to run a script locally

I am trying to display XML in an HTML page
<html>
<body>
<script>
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","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>Author</td><td>");
document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td></tr><tr><td>Song</td><td>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>
</body>
</html>
It works like a charm in W3School Try it yourself section, but I want to run it from my local computer, how can i do this?

Not able to generate XML from php

I need to hit a url by either means and after the response I just want to generate an xml showing done.
Here is the code that is trying to generate the XML and before this all the JS is placed:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div id="myDiv" style="display:none;"></div>
<script type="text/javascript">
<?php echo "var link = '".$url."';"; ?>
loadXMLDoc(link);
function loadXMLDoc(link)
{
var xmlhttp;
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("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",link,true);
xmlhttp.send();
}
</script>
$data = "";
header('Content-type: text/xml');
$data="<parameters>";
$data .= "<result>Product Added To The Cart</result>";
$data .= "</parameters>";
echo $data;
Here is the output I am getting
This page contains the following errors:
error on line 5 at column 1: Extra content at the end of the document
Below is a rendering of the page up to the first error.
Here is the source of the output I am getting:
<script type="text/javascript">
var link = 'http://obaoja.com/checkout/cart/add/product/7027/qty/1/'; loadXMLDoc(link);
function loadXMLDoc(link)
{
var xmlhttp;
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("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",link,true);
xmlhttp.send();
}
</script>
<parameters><result>Product Added To The Cart</result></parameters>
I just need <parameters><result>Product Added To The Cart</result></parameters> in XML format.

onchange 2 functions on 1 dropdown

I have 2 functions that I would like to call from one dropdown menu. It seems I can only get one to work, but not both. Looking for some help sorting this out. Here is the code, thank you.
Function 1
<script type="text/javascript">
function getCredit(str)
{
if (str=="")
{
document.getElementById("credit").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==4 && xmlhttp.status==200)
{
document.getElementById("credit").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcredit.php?id="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('company')[0].onchange();
}
</script>
And here is function 2.
<script type="text/javascript">
function getTerms(str)
{
if (str=="")
{
document.getElementById("terms").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==4 && xmlhttp.status==200)
{
document.getElementById("terms").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","customertermsdropdownquery.php?id="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('company')[0].onchange();
}
</script>
And here is the form dropdown that calls them.
<td><select name="company" onchange="getTerms(this.value);getCredit(this.value);">
<?php while($row = mysql_fetch_array($result)) {
echo "<option value=\"".$row['company']."\">".$row['company']." (".$row['first']." ".$row['last'].")</option>"; } ?></select></td>
I use div in the form to display php.
<div id="terms"></div>
and
<div id="credit"></div>
I can get either one to work by itself, just not together. Thanks for your help.
Totally understandable that you want to keep them separated. How about create a new function like this.
function getTermsAndCredits(value) {
getTerms(value);
getCredits(value);
}
Then in the onchange event call it like this
<td><select name="company" onchange="getTermsAndCredits(this.value);">
Here is a fiddle which should give you a better idea. I don't believe it's necessary to call the onload functions as you have in your code currently.

Javascript function in header showing as undefined

<script type="text/javascript">
function centerItem(id,size)
{
var pad = (window.innerWidth - size)/2;
document.getElementById(id).style.marginLeft = pad+"px";
document.getElementById(id).style.marginRight = pad+"px";
}
function login()
{
document.getElementById('box').innerHTML="<img src="img/pleasewait.gif" />";
var xmlhttp;
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('box').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","http://[lan ip]/Athena/lib/ajax/login.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("email="+email+"&pass="+pass);
}
</script>
That is in my <head> section, and I'm calling it using this.
<script type="text/javascript">centerItem('login',210);</script>
However, I'm getting an error saying "Uncaught ReferenceError: centerItem is not defined
(anonymous function)"
Any thoughts?
document.getElementById('box').innerHTML="<img src="img/pleasewait.gif" />";
Should really be:
document.getElementById('box').innerHTML="<img src=\"img/pleasewait.gif\" />"
you need to escape the double quotes when creating the image tag.
And you should cache your selected elements. The result would be something like:
function centerItem(id, size) {
var pad = (window.innerWidth - size)/2,
elem = document.getElementById(id);
elem.style.marginLeft = pad+"px";
elem.style.marginRight = pad+"px";
}
function login() {
var xmlhttp;
var box = document.getElementById('box');
box.innerHTML="<img src=\"img/pleasewait.gif\" />";
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) {
box.innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("POST","http://[lan ip]/Athena/lib/ajax/login.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("email="+email+"&pass="+pass);
}

Categories

Resources