Question

I am currently trying to create a javascript closure that will create a drop down list using values from the XML file I have. I have got it working for most of the code, and was loading the XML file each time I had to use it. I want to make the code more efficient though and only load the XML file once. I’ve tried to do this using the code below, but keep getting an error.

This is the code I have for the closure…

var closure = function() {

    var xmlDoc;

    return{

            setXML: function()
            {
                xmlDoc = this.loadXMLDoc("feed.xml");
            },


            loadXMLDoc: function(dname)
            {
                if (window.XMLHttpRequest)
                {
                    xhttp=new XMLHttpRequest();
                }
                else
                {
                    xhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }

                xhttp.open("GET",dname, false);
                xhttp.send();
                return xhttp.responseXML;
            },


            createField: function() 
            {
                x = xmlDoc.getElementsByTagName("name");
                //code to create the drop down box
            },

            findValue: function() 
            {
                y = xmlDoc.getElementsByTagName("value");
                //code to find value
            }

   };

}();

This is the code that calls the function…

$(document).ready(function () {
    closure.setXML();
});

The error i’m getting is ‘Cannot call method ‘getElementsByTagName’ of undefined’, which is found in the createField function. It’s the first instance of me trying to use the xmlDoc.

Any help or tutorials on the issue is much appreciated.

Answer 1

Since you are doint jQuery, why not use jQuery in your closure also? If xmlDoc was undefined, there must be issues loading it. Try doing a console.log to see if any data was returned after doing AJAX.

var closure = (function($) {

    var xmlDoc;

    return {
        setXML: function() {
            this.loadXMLDoc("feed.xml", function(data) {
                xmlDoc = data;
            });
        },
        loadXMLDoc: function(dname, callback) {
            $.get(dname, function(data) {

                //a possible point of failure
                //do console.log(data) to see if anything was returned

                callback(data);
            }, 'xml');
        },
        createField: function() {
            x = $("name",xmlDoc);
            //code to create the drop down box
        },
        findValue: function() {
            y = $("value",xmlDoc);
            //code to find value
        }
    };
}(jQuery));​