XML Ajax Load

Demo code for SO Question: http://stackoverflow.com/questions/24068500/javascript-only-shows-values-and-not-xml-information

by David Kyle

HTML

<div class="main">
     <h1>Cord Data</h1>

    <form action="" method="get">
        <select id="country-options" name="country">
            <option value="-1">--Select a Country--</option>
            <option value="0">United States</option>
            <option value="1">Canada</option>
            <option value="2">Mexico</option>
            <option value="3">Germany</option>
            <option value="4">Spain</option>
            <option value="5">Greece</option>
            <option value="6">India</option>
        </select>
    </form>
    <div class="output-data">
         <h2 class="header"></h2>
 <span class="content"></span>

    </div>
</div>

CSS

DIV.main {
    margin: 0px auto;
    border-radius: 5px;
    padding: 3px;
    width: 100%;
    max-width: 400px;
    border: solid 1px rgba(200, 200, 200, .8);
    background-color: #dedede;
    font-family: Verdana, Arial, sans-serif;
}
DIV.main H1 {
    margin: 0px auto;
    text-align: center;
    border-radius: 5px;
    border: outset 1px rgba(180, 180, 220, .6);
    padding: 2px;
    background-color: #efefef;
    font-size: 105%;
    box-shadow: 0px 2px 5px;
    margin-bottom: 10px;
}
DIV.main SELECT {
    border-radius: 4px;
}
}

JavaScript

var currentCountry = null;
$(document).ready(function () {

    //Bind a custom event for making the ajax call
    $(document).bind("country-selected", function (e, data) {
        console.log(data.Country);
        alert(data.Country);
        if (data.Country > -1) {
            currentCountry = data.Country; //This will be used later
            LoadData(data.Country); // Call the ajax function
        } else {
            console.log("Please select a valid country.");
            alert("Please select a valid country.");
        } // end if/else
    });

    $(document).bind("display-cord-data", function (e, data) {
        var xmlDoc = $.parseXML(data); // use the JQuery xml parser to parse the document and store it in a variable
        console.log(data);
        //Begin parsing the xml document
        var xml = $(xmlDoc);
        var title = xml.find("summaryData").find("title").text();
        $(".header").text(title);
        var rowTarget = "row[id=\"" + currentCountry + "\"]";
        var rows = xml.find("rows").find(rowTarget);
        if (rows != null && rows.length > 0) {
            var outputMarkup = "";
            for (var i = 0; i < rows.length; i++) {
                var rowData = $(rows[i]);
                var contentData = "";
                contentData += "<b>Row " + i + "</b>: " + rowData.find("name").text() + "<br />";
                outputMarkup += contentData;
            } // end for loop
            $(".content").html(outputMarkup);
        } else {

            $(".content").html("No Data");
        } // end if/else
    });

    //Add a change event handler to the select list
    $("#country-options").change(function (e) {
        var selectedCountry = this.value; // Get the selected option

        //Trigger the event we created, and pass the country
        $(document).trigger("country-selected", {
            Country: selectedCountry
        });
    });
});

function LoadData(selectedCountry) {
    var self = this;
    //For...