Question

I am developing a PhoneGap based IPhone application and I have folder structure as below.

www/
www/js/
www/css
www/data/

The “/data” folder has a XML file storing facutlies and the structure is…

<?xml version="1.0" encoding="UTF-8"?>
<Faculties>
   <Faculty Name="" Room="" Phone="" Fax="" Email="" Address="">
        <Department Name="">
            <Room>
            </Room>
            <Phone>
            </Phone>
            <Fax>
            </Fax>
            <Email>                                          
            </Email>
            <Address>
            </Address>
        </Department>    
    </Faculty>
    <Faculty Name="" Room="" Phone="" Fax="" Email="" Address="">
        <Department Name="">
            <Room>
            </Room>
            <Phone>
            </Phone>
            <Fax>
            </Fax>
            <Email>                                          
            </Email>
            <Address>
            </Address>
        </Department>    
   </Faculty>
   <Faculty Name="" Room="" Phone="" Fax="" Email="" Address="">
        <Department Name="">
            <Room>
            </Room>
            <Phone>
            </Phone>
            <Fax>
            </Fax>
            <Email>                                          
            </Email>
            <Address>
            </Address>
        </Department>    
    </Faculty>
</Faculties>

I am reading this XML using jQuery and AJAX. It can query though it always retrieves 2 faculties instead of 3 as there are 3 not 2.

function populateFaculties(target, after) {
    var file = "data/FacultiesAndDepartments.xml";

    $(target).find("option:gt(0)").remove().end();

    $.ajax({
        url: file,
        type: 'GET',
        dataType: 'xml',
        success: function(result) {
            var faculties = $(result).find("Faculties Faculty");

            console.log("There are " + faculties.length + " faculties in the XML.");

            if (faculties.length < 1) {
                $(target).attr("disabled", "disabled");
                after(null);
                return null;
            }

            var done = 0;

            $(faculties).each(function(index, faculty) {
                done++;
                $(target).append('<option value="' + (index + 1) + '">' + $(faculty).attr("Name") + '</option>');
            });

            var timer = setInterval(function() {
                if (faculties.length == done) {
                    timer = window.clearInterval(timer);
                    $(target).removeAttr("disabled");
                    after(faculties);
                }
            }, 500);
        }
    });
}

The “target” is passed which is “select” element and “after” is a delegate function.

Answer 1

I figured out the issue myself. Ampersands in XML are reserved and must be converted to “&”.