Javascript - parse XML document to create array

Question

I am working on a web-based application which contains 'divs' that I use for clickable buttons. Currently, my code calls a handleClick function for each 'div' button that needs to be handled. I would like to parse an xml document to get the inputs required for my handleClick function. I have tried implementing solutions from this thread: Parsing XML with Javascript and create array, but I haven't had any luck. I have also been trying to use this information: http://www.w3schools.com/xml/dom_intro.asp, but I'm confused as to what is really needed. The w3schools code uses the XMLHttpRequest function, but the stackoverflow code does not. Here's what I have so far:

//Change background image when Login button clicked.
    handleClick("#btnLogin", "SideMenu.png", "LoginButton", "SideMenuButton");


function handleClick (inputButton, inputImage, inputIndexOFF, inputIndexON) {
    $(inputButton).click(function() {
        $("body").css("background-image", "url(" + inputImage + ")");

        //This is how I remove the highlight from the buttons.
        zIndexON(inputIndexON);
        //This is how I apply the highlight to buttons.
        zIndexOFF(inputIndexOFF);       
    }); 
}

function zIndexOFF (inputClass) {
    var x = document.getElementsByClassName(inputClass);
    for (i = 0; i < x.length; i++) {
        x[i].style.zIndex = "-1"
    }
}

function zIndexON (inputClass) {
    var x = document.getElementsByClassName(inputClass);
    for (i = 0; i < x.length; i++) {
        x[i].style.zIndex = "1"
    }
}

//XML
<buttons>
    <button>
        <inputButton>#btnLogin</inputButton>
        <inputImage>SideMenu.png</inputImage>
        <inputIndexOFF>LoginButton</inputIndexOFF>
        <inputIndexON>SideMenuButton</inputIndexON>
    </button>
</buttons>

My initial idea was to create a function to load the xml doc per the information from the w3schools page, then use a for loop to parse the xml elements, and create an array containing the necessary inputs for the handleClick function, then loop through the array to call the handleClick function to process all of the clicks, rather than repeat the same call to handleClick for each button. If there is a simpler way, I'm all ears.

EDIT: I have created a handleClicks function trying to implement the thread from the post I linked above. I also edited my XML doc to resemble the XML from the same thread.

function handleClicks () {
//Get all buttons from XML
var btns = jQuery(buttons).find("button");

//Get input fields for each button in XML
for (var i = 0; i < btns.length; i++) {
    var ret = [];
    var tot = [];
    ret[0] = jQuery(btns[i]).find('inputButton').text();
    ret[1] = jQuery(btns[i]).find('inputImage').text();
    ret[2] = jQuery(btns[i]).find('inputIndexOFF').text();
    ret[3] = jQuery(btns[i]).find('inputIndexON').text();
    tot.push(ret);
}

//Call handleClick function for each button from XML doc, and pass in inputs to handleClick function
for (var j = 0; j < button.length; i++) {
    handleClick(tot[0].text, tot[1].text, tot[2].text, tot[3].text);
}

}

The buttons still highlight on hover, but nothing happens when I click.

What does that XML code look like? Does it contain the actions that should be taken when a button is clicked? Also I don't see why you would have problems parsing the XML. The first link you gave explains how to do that with jquery. — Tesseract
– Tesseract, Commented Oct 10, 2015 at 15:26
The XML is actually at the bottom of the code snippet. The nodes in the XML doc for each <button> element are the values to pass into the handleClick function. The action when the button is clicked is change the background to the inputImage, turn on highlight for buttons on the inputImage, turn off highlight for buttons on all other buttons. — Duders
– Duders, Commented Oct 10, 2015 at 18:22

Orest Hera · Accepted Answer · 2015-10-11 07:45:10Z

1

Regarding XML parsing your example is correct. The only place that is not clear is your buttons variable in jQuery(buttons).find("button");. The following example correctly parses the sample xml and calls handleClick with needed data:

var xml_text = "<buttons>" +
    "<button>" +
    "    <inputButton>#btnLogin</inputButton>" +
    "    <inputImage>SideMenu.png</inputImage>" +
    "    <inputIndexOFF>LoginButton</inputIndexOFF>" +
    "    <inputIndexON>SideMenuButton</inputIndexON>" +
    "</button>" +
    "</buttons>"

var xml = $.parseXML(xml_text);

function handleClick(inputButton, inputImage, inputIndexOFF, inputIndexON) {
    console.log(inputButton +' ' + inputImage +' ' + inputIndexOFF +' ' + inputIndexON);
}

function parseXml(xml) {
    jQuery(xml).find("button").each(function() {
        var inputButton = jQuery(this).find("inputButton").text();
        var inputImage = jQuery(this).find("inputImage").text();
        var inputIndexOFF = jQuery(this).find("inputIndexOFF").text();
        var inputIndexON = jQuery(this).find("inputIndexON").text();
        handleClick(inputButton, inputImage, inputIndexOFF, inputIndexON);
    });
}

The XML document can be downloaded from the Web using jQuery GET or POST request:

$.ajax({
    type: "POST",
    url: "/echo/xml/",
    dataType: "xml",
    data: {
        xml: xml_text
    },
    success: function(xml) {
        console.log(xml);
        parseXml(xml);
    },
    error: function(data) {
        console.log(data);
    }
})

In this example https://jsfiddle.net/t406v94t/ the XML is downloaded using POST request. The sample xml_text is posted to the jsfiddle server to receive it back as Web data. The document is parsed once the download is successfully finished.

edited Oct 11, 2015 at 7:45

answered Oct 10, 2015 at 18:54

Orest Hera

6,7962 gold badges26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Duders Over a year ago

Thank you, Orest Hera. That code works when I save my XML to the var xml_text variable. How can I load the entire XML file into a that variable, so that I don't have to copy and paste all of the XML from the file into the xml_text variable?

Duders Over a year ago

Does that work for local files as well? I am not doing any kind of web hosting. All of my files are just local. I tried using the local path for my xml file in the ajax snippet above, but that didn't work. I can just assign the entire text to the xml_test variable, but I would love to be able to just read it into a string, and pass that string to the parseXML function above.

Orest Hera Over a year ago

@Duders 1. Reading local file is against security considerations, see for solution stackoverflow.com/questions/4408707/… : "launch chrome with --allow-file-access-from-files" (according to the comments it may work in FF). 2. It is possible to load file if user selects it: html5rocks.com/en/tutorials/file/dndfiles 3. You know that XML can be provided as JavaScript string constants or from local Web server.

Duders Over a year ago

Thank you Orest. I will implement one of those two solutions.

Collectives™ on Stack Overflow

Javascript - parse XML document to create array

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related