Develop Reference

Read XML file using JavaScript in Chrome

I need to load and read an XML file using JavaScript.
The following code works fine in Firefox, IE and Opera:
function loadXMLDoc(dname) {
var xmlDoc
// Internet Explorer
try {
xmlDoc = new ActiveXObject('Microsoft.XMLDOM')
}
catch (e) {
// Firefox, Opera, etc.
try {
xmlDoc = document.implementation.createDocument('', '', null)
}
catch (e) {
alert(e.message)
}
}
try {
xmlDoc.async = false
xmlDoc.load(dname)
return xmlDoc
}
catch (e) {
alert(e.message)
}
return null
}
But executing this code in Chrome gives me this error:
Object# has no method "load"

Legacy Code
document.implementation.createDocument does not work on Chrome and Safari.
Use XMLHttpRequest instead when possible:
function loadXMLSync(url) {
try {
// Prefer XMLHttpRequest when available
var xhr = new XMLHttpRequest()
xhr.open('GET', url, false)
xhr.setRequestHeader('Content-Type', 'text/xml')
xhr.send()
return xhr.responseXML
}
catch (e) {
// XMLHttpRequest not available, fallback on ActiveXObject
try {
var activex = new ActiveXObject('Microsoft.XMLDOM')
activex.async = false
activex.load(url)
return activex
}
catch (e) {
// Neither XMLHttpRequest or ActiveXObject are available
return undefined
}
}
}
Modern Browsers
If you're targeting modern browsers (> IE6), just use XMLHttpRequest:
function loadXMLSync(url) {
var xhr = new XMLHttpRequest()
xhr.open('GET', url, false)
xhr.setRequestHeader('Content-Type', 'text/xml')
xhr.send()
return xhr.responseXML
}

On MDN, there is guidance to use XMLHttpRequest. But it isn't clear from DOMImplementation.createDocument until you drill into the return type and see that XMLDocument is not supported in Google Chrome. The example on W3Schools uses XMLHttpRequest.

follow this to print,load,append xml data.Here xml is stored as string inside javascript.This method works in chrome,firefox hopes it will work in others too
txt="<papers>"+"<paper>"+
"<author>athor name</author>"+
"<title>title</title>"+
"<path>path</path>"+
"<track>which tack</track>"+
"</paper>"+
"<paper>"+
"<author>athor name</author>"+
"<title>title</title>"+
"<path>path</path>"+
"<track>which tack</track>"+
"</paper>"+
"<paper>"+
"<author>athor name</author>"+
"<title>title</title>"+
"<path>path</path>"+
"<track>which tack</track>"+
"</paper>"+
"<papers>";
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}
x=xmlDoc.getElementsByTagName("paper");
for (var i = 0; i < x.length; i++) {
var athor =x[i].childNodes[0].firstChild.nodeValue;
var title = x[i].childNodes[1].firstChild.nodeValue;
var path = x[i].childNodes[2].firstChild.nodeValue;
var tack =x[i].childNodes[3].firstChild.nodeValue;
//do something with these values...
//each iteration gives one paper details
var xml=document.getElementById("element_id");//<div id="element_id"></div>
var li = document.createElement("br");// create a new <br>
newlink = document.createElement('A'); // creating an <a> element
newlink.innerHTML = athor;// adding <a>athor value here</a>
newlink.setAttribute('href', path);//
newlink.appendChild(li);// athor<br>
document.getElementById("element_id").appendChild(newlink);
//finaly it becomes <div id="element_id">athor<br></div>
}
i posted this answer here

Add
var xhr = new XMLHttpRequest();
xhr.open("GET", "/example/xdom/books.xml", false);
xhr.send(null);
xmlDoc = xhr.responseXML.documentElement;
return xmlDoc;
in catch statement. Like below:
function loadXMLDoc(dname) {
var xmlDoc
// Internet Explorer
try {
xmlDoc = new ActiveXObject('Microsoft.XMLDOM')
}
catch (e) {
// Firefox, Opera, etc.
try {
xmlDoc = document.implementation.createDocument('', '', null)
}
catch (e) {
alert(e.message)
}
}
try {
xmlDoc.async = false
xmlDoc.load(dname)
return xmlDoc
}
catch (e) {
//alert(e.message)
// For Chrome
var xhr = new XMLHttpRequest();
xhr.open("GET", "/example/xdom/books.xml", false);
xhr.send(null);
xmlDoc = xhr.responseXML.documentElement;
return xmlDoc;
}
return null
}

Calling Ajax multiple times in blackjack

I am creating a blackjack game using html, js, ajax and php. When the Player first loads the game, a prompt appears on the page asking for the name, and this goes to a name.php which checks to see if the user name is in the database. If not, it adds it. In either case, it will place the player's name and bank total on the screen. This part of my code was working fine until I added the next part of the code.
When the user clicks on the "hit" button, hit.php is called, which for now should just be pulling 1 card from the deck table (will fully implement hit later on) and placing it within the "player" div on the screen. However, now that I have 2 ajax calls, nothing whatsoever is happening, including the original prompt for the player name.
Is the 2nd call somehow interfering with the 1st call?
Any suggestions as to how I should treat the ajax calls would be greatly appreciated.
var username;
var playerName = "";
var playerBank = 0;
var playerCard;
var playerHandValue = 0;
var dealerHandValue = 0;
var randomCardNumber;
function checkName() {
username = prompt("Welcome to Blackjack.\n Please enter your username");
if(document.getElementById('playerName').value == null) {
ajaxName();
}
click();
}
function printName() {
return playerName;
}
function printBank() {
return playerBank;
}
function ajaxName() {
var uName = username;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttpN=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttpN=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttpN.onreadystatechange=function() {
if (xmlhttpN.readyState==4 && xmlhttpN.status==200) {
var elements = xmlhttpN.responseText.split("|");
playerName = elements[0];
playerBank = elements[1];
document.getElementById('playerName').innerHTML = printName();
alert(playerName);
document.getElementById('playerBank').innerHTML = printBank();
}
}
xmlhttpN.open("POST","name.php",true);
xmlhttpN.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttpN.send("player="+username);
}
function click() {
document.getElementById('hit').onclick = function(){ ajaxButton(this);};
document.getElementById('stand').onclick = function(){ ajaxButton(this);};
document.getElementById('raiseBet').onclick = function(){ ajaxButton(this);};
document.getElementById('newGame').onclick = function(){ ajaxButton(this);};
}
function ajaxButton(buttonClicked) {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttpB=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttpB=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttpB.readyState==4 && xmlhttpB.status==200) {
var elements = xmlhttpB.responseText;
if(buttonClicked.innerHTML == "HIT") {
randomCardNumber = randNumber(1,52);
playerCard = elements[0];
document.getElementById('player').innerHTML = displayCard();
xmlhttpB.open("POST","hit.php",true);
xmlhttpB.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttpB.send("card_id="+randomCardNumber);
}
}
if(buttonClicked.innerHTML == "STAND") {
alert("stand");
}
if(buttonClicked.innerHTML == "RAISE BET") {
alert("raise bet");
}
if(buttonClicked.innerHTML == "NEW GAME") {
alert("new game");
}
}

No JavaScript errors reported in your browser, and the prompt isn't coming up at all, and nothing happens when you click hit? It sounds as though perhaps you aren't calling the checkName() or click() functions at all. Have you refactored those into methods recently when they weren't previously?
It seems to me that checkName should occur as soon as the page loads, so if it doesn't already, try putting a call to it in a script block at the bottom of the page.

Dynatree IE9 problems loading

I´ve implemented a dynatree on a web application, dynatree is generated from server with a JSON object.
Dynatree works perfectly on Firefox, Safari, Chrome and Opera (last versions), but when I open on IE9, I just capable of loading the tree after refresh the page, or start the debug mode. I can´t find any mistake on console, script....
Any suggestion? someone with the same problem?
Code:
function hacerPeticion(url, callback){
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange = function(){
if (request.readyState == 4 && request.status == 200){
callback(request);
}
}
request.open("GET", url, true);
request.send();
}
Using the function:
hacerPeticion('/ServiciosWeb/Zonas.jsp', function(data){
var data = JSON.parse(data.responseText);
var arbol = data;
eval('var obj='+arbol);
console.log(obj);
$(function(){
$("#tree3").dynatree({
checkbox: true,
selectMode: 3,
children: obj,
onSelect: function(select, node) {
if(!select){
if(node.data.key=="zonas"){
control=false;
cargaMapaCYL(map, control);
}
if(node.data.key=="ast"){
control=false;
cargaMapaAst(map, control);
}
/*Nodos seleccionados*/
if(select){
if(node.data.key=="zonas"){
control=true;
cargaMapaCYL(map, control);
}
if(node.data.key=="ast"){
control=true;
cargaMapaAst(map, control);
}
}
onDblClick: function(node, event){
node.toggleSelect();
},
onKeydown: function(node, event) {
if( event.which == 32 ) {
node.toggleSelect();
return false;
}
}
});
Thanks in advance.

So....., the problem is in this line:
console.log(obj);
When I have retired this line everything works fine.

Dynamically change a div's ID?

I have a bunch of divs with weird id and each of them contains a video. They're actually video embed codes but they're not usual to me. Here's one example:
<div id="evp-1fae4e37639894816f03591bc7009c68-wrap" class="evp-video-wrap"></div><script type="text/javascript" src="http://domain.com/evp/framework.php?div_id=evp-1fae4e37639894816f03591bc7009c68&id=cmVsYXRpb25zaGlwLW1hcmtldGluZy0xLmZsdg%3D%3D&v=1278525356"></script><script type="text/javascript">_evpInit('cmVsYXRpb25zaGlwLW1hcmtldGluZy0xLmZsdg==');</script>
What I want to do is create a video playlist. As a part of that, I created list using divs also which use the onclick attribute to trigger my JS function to switch between videos. Here's how it looks:
<div class="vid-list" onclick="switchvideo('http://domain.com/html-vids/headline-vids/second-vid.html', 2)"><p>This a video tutorial for blah blah blah.</p></div>
The problem is, each time I switch to another video the div id of the embed code changes also because otherwise it won't work. So I need to change that before loading the video script inside the div. I tried to achieve that using the following JS function:
function switchvideo(url, vidnumber)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET",url,false);
xmlhttp.send();
}
var div_node = document.getElementByClass('evp-video-wrap');
if ( vidnumber == 2 ) {
div_node.id = 'evp-78c0b7c4f6d3377954825f145734fd5c-wrap';
}
document.getElementById(div_node.id).innerHTML=xmlhttp.responseText;
}
Apparently it's not working. I suspect the problem are the lines in bold above. I tried to get the element by 'class' and its id by using 'div_node.id'. I am assuming that by doing 'document.getElementByClass', I am getting the reference to that element so I could use it to manipulate its other attributes. But I am not sure... Could anyone pls enlighten me??

There is no getElementByClass() method. There is a getElementByClassName() but it's not available in every browser.
Here is one you can use:
// http://www.dustindiaz.com/getelementsbyclass/
function getElementsByClass(searchClass, node, tag) {
var classElements = new Array();
if (node == null) node = document;
if (tag == null) tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if (pattern.test(els[i].className)) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
Then you can call it as
getElementByClass('evp-video-wrap');
Your ajax is a bit tricky, but here is a more general one:
function getXmlHttpObject() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (!xmlHttp) {
alert("Your browser does not support AJAX!");
}
return xmlHttp;
}
function ajax(url, onSuccess, onError) {
var xmlHttp = getXmlHttpObject();
xmlHttp.onreadystatechange = function() {
if (this.readyState === 4) {
// onSuccess
if (this.status === 200 && typeof onSuccess == 'function') {
onSuccess(this.responseText);
}
// onError
else if(typeof onError == 'function') {
onError();
}
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
return xmlHttp;
}
Finally your code becomes:
function switchvideo(url, vidnumber) {
var div_node = getElementByClass('evp-video-wrap')[0];
// make a call to the url, and execute the
// callback when the response is available
ajax(url, function( responseText ){
if (vidnumber == 2) {
div_node.id = 'evp-78c0b7c4f6d3377954825f145734fd5c-wrap';
}
document.getElementById(div_node.id).innerHTML = responseText;
});
}​
You can see the whole code [here]

getElementByClass isn't a standard method. Is it possible for you to use a framework for this? jQuery has a nice mechanism to search for an element by class, as do the other frameworks. It also makes it much easier to do the AJAX bits in a cross-browser supported way.
function switchvideo(url, vidnumber)
{
$.get(url, function(data) {
var div_node = $('.evp-video-wrap');
if (vidnumber == 2) {
div_node.attr('id', 'evp-78c0b7c4f6d3377954825f145734fd5c-wrap');
}
div_node.html( data );
});
}
An alternative would be to write your own getElementByClass or specific code to search for a DIV by class. Note: I assume you're only interested in the first match.
function getDivByClass( klass )
{
var regex = new RegExp( '(^|\\s+)' + klass + '(\\s+|$)' );
for (div in document.getElementsByTagName('div')) {
if (regex.text( div.className)) {
return div;
}
}
return null;
}

How can i debug this ajax script for IE?

I have and an AJAX script in a page that works just fine with no bugs in firefoex, but IE6 loads the page with an ugly error icon on the status bar. What is the best way i can go about fixing/debugging this?
Here is the error report:
I have checked line 323 many times Here is the function:
function checkAvailability(){
var card_select = document.getElementById('card_select').value;
var price_select = document.getElementById('price_select').value;
var num_of_cards = document.getElementById('num_of_cards').value;
var url = 'checkAvailability.php?cardName=' + card_select + '&value=' + price_select + '&amount=' + num_of_cards;
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.responseText) /**** line 323 ****/
{
document.getElementById('submit_button').className = 'hidden';
document.getElementById('div_error_massage').className = 'anounce_div';
document.getElementById('error_massage').innerHTML = xmlhttp.responseText;
document.getElementById('num_of_cards').className = 'red_inputs';
}
else if(isNaN(num_of_cards))
{
document.getElementById('submit_button').className = 'hidden';
document.getElementById('num_of_cards').className = 'red_inputs';
document.getElementById('div_error_massage').className = 'hidden';
}
else if(num_of_cards != "" && !xmlhttp.responseText)
{
document.getElementById('submit_button').className = '';
document.getElementById('error_massage').innerHTML = 'Total: $' + document.getElementById('price_select').value * document.getElementById('num_of_cards').value + '.00';
document.getElementById('div_error_massage').className = 'anounce_div';
}
else
{
document.getElementById('submit_button').className = 'hidden';
document.getElementById('num_of_cards').className = 'red_inputs';
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

In IE, you can try the old script debugger or Visual Web Developer Express. When the error throws, enter the debugger and examine xmlhttp.

In addition to outis' answer, if you want to control where you jump in with the debugger, use Javascript's debugger keyword, which acts like a breakpoint. When the line with debugger; is hit, in IE you will get a prompt (if debugging is enabled in IE, check your Internet Options) to launch the debugger, starting at that line. In Firefox, the debugger; statement is picked up by Firebug as a breakpoint.

You are trying to read !xmlhttp.responseText when the readyState is not 4
Try removing that line and see if IE runs.

A great Javascript debugger for IE comes with MS Office.
A quick google shows this as a howto: http://www.jonathanboutelle.com/mt/archives/2006/01/howto_debug_jav.html