Why does jquery give me a “selector is undefined” error for this code?

Question

I am really struggling with an issue that I hope someone here will take some time to help me with. I'm trying to find the last text selection for a child node named "Emotion" in an xml document using jQuery 1.6.2 and JQM 1.0rc3. The XML document I'm working with has the following structure.

<StatusModel>
 <Uid>5e4dc88f-f703-4e34-92f6-609216de6c6f</Uid>
 <Created>Wednesday, November 02, 2011 2:20 PM</Created>
 <User>larry_irons</User>
 <Level>2</Level>
 <Doing>typing</Doing>
 <Thinking>the pain in my neck</Thinking>
 <Emotion>Pain</Emotion>
</StatusModel>

The following ajax code retrieves the entire xml document and I see the succesful Get in firebug's console. However, I also receive a "selector is undefined" error message and the function fails to retrieve the text for Emotion as the "var tracking" declaration attempts to do. The ajax is as follows:

$('#feeling').live('pageinit', function (event) {


    $.ajax({
        type: "Get",
        url: "/api/list",
        cache: false,
        dataType: 'xml',
        success: function (xml) {

            manipulateType(xml);
        }


    });

    function manipulateType(xml) {

        //empty the emotion_type div
        $("#emotion_type").html("");

        //retrieve current emotion to track and append to div emotion_type
        $(xml).find('StatusModel').each(function () {

            var tracking = $(this).find("Emotion").text();


            //append content and tracking variable to div emotion_type
            $('#emotion_type').append("On a scale of 1 (low) to 10 (high) I'm feeling this much " + tracking + ':');

            //refresh the review data div #summarylist
            $('#emotion_type').live("refresh");

        });
    }
});

I'm assuming the error message is resulting from the "var tracking" declaration. However, another page in my application runs virtually the same code without an error message. I need two points of advice if someone is willing to engage me on this problem.

Can you see any obvious problem with how I'm declaring the selector?

Can you offer some insight into how I can modify it so that it returns the text of the last child node for "Emotion" in the xml document?

Update: I changed to jquery.mobile-1.0.js and jquery-1.6.4.js. The error still occurs.

Answer 1

Are you getting the data as a string? In that case you need to put it through the browsers window.DOMParser (firefox, chrome) or ActiveXObject (IE). I doubt it is the actual selector, that looks fine.

Also, it is good to save your reference to $("#emotion_type") before you iterate (and choose a better name :).

function manipulateType(xml) {
    var emo = $("#emotion_type");

    //empty the emotion_type div
    $(emo).html("");

    //retrieve current emotion to track and append to div emotion_type
    $(xml).find('StatusModel').each(function () {

        var tracking = $(this).find("Emotion").text();


        //append content and tracking variable to div emotion_type
        $(emo).append("On a scale of 1 (low)...");

        //refresh the review data div #summarylist
        $(emo).live("refresh");

    });
}