---

Introduction

---

I'm building world-wide conference room directory using a XML data set. I want to tuck the data in the this.formData so that I can reuse that info in multiple ways without having to call the XML again and again.

this.formData is undefined as I step through the debugger

What am I doing wrong?

---

The Code

---

var Directory = function () {
    this.formData;
};

Directory.prototype = function () {

    init = function () {
        getXMLforDropDown.call(this);
        buildDropDown.call(this);
    },
    getXMLforDropDown = function () {

        var directoryObj = this;

        $.ajax({
            url: 'formdata/crooms.xml',
            dataType: "xml",
            success: function (xmlData) {

               directoryObj.formData = xmlData;

            }
        });
    },
    buildDropDown = function () {
        if ($('#ddChooseCountry')) {
            $('#ddChooseCountry').append($('<option value=""></option>'));
            $(this.formData).find('room').each(function () {
                var strCountry = ($(this).attr('country'));
                if (strCountry !== "") {
                    $('#ddChooseCountry').append($('<option value="' + strCountry + '">' + StrCountry + '</option>'));
                }
            });
        }
    }


    return {
        init: init
    }
} ();



$(document).ready(function () {

    var directory = new Directory() ;
    directory.init();

});

---

You're making an asynchronous http request, so your buildDropDown method gets called too early. You could try setting an ajax option to make it a synchronous request.

$.ajax({
  async: false, // yay for sync
  url: 'formdata/crooms.xml',
  dataType: 'xml',
  success: function (xmlData) {
    directoryObj.formData = xmlData;
  }
});

Alternatively you could just call buildDropDown inside of your success handler.

$.ajax({
  url: 'formdata/crooms.xml',
  dataType: 'xml',
  success: function(xmlData) {
    directoryObj.formData = xmlData;
    directoryObj.buildDropDown();
  }
});