jQuery and XML (with CDATA)

Question

I've seen the post that deal with this issue but I still can't solve my issue:

I've got XML with CDATA and when I parse the XML, it includes the CDATA (which I don't want).

XML sample:

<mainnav>
    <nav path="/" xmlpath="home.xml" key="footer" navigator="">
        <display><![CDATA[Home]]></display>
        <title><![CDATA[Home]]></title>
    </nav>

    <nav path="/nav1/" xmlpath="nav1.xml" key="primary" navigator="primary" iconid="0">
        <display><![CDATA[Nav 1]]></display>
        <title><![CDATA[Nav 1]]></title>
        <overdesc><![CDATA[test nav 1]]></overdesc>

        <sub path="/nav1/sub1/" xmlpath="nav1/sub1.xml" key="sub">
            <display><![CDATA[sub 1<br />of nav 1]]></display>
            <title><![CDATA[sub 1<br />of nav 1]]></title>
        </sub>

    </nav>


    <nav path="/nav1/" xmlpath="nav2.xml" key="primary" navigator="primary" iconid="1">
        <display><![CDATA[Nav 2]]></display>
        <title><![CDATA[Nav 2]]></title>
        <overdesc><![CDATA[test nav 2]]></overdesc>

        <sub path="/nav2/sub1/" xmlpath="nabv2/sub1.xml" key="sub">
            <display><![CDATA[sub 1<br />of nav 2]]></display>
            <title><![CDATA[sub 1<br />of nav2]]></title>
        </sub>

    </nav>

</mainnav>

jQuery:

$(document).ready(function(){
$.ajax({
    type: "GET",
    url: "site_xml/config.xml",
    //contentType: "text/xml",
    dataType: ($.browser.msie) ? "xml" : "text/xml",
    success: parseXML,
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(errorThrown);
    }
});});

function parseXML(xml) {
$(xml).find('nav').each(function(){
     if ($(this).attr("key")=="primary") { // this is a primary nav item;
        var title = $.trim( $(this).find('title').text() );
        alert(title);
        $("#output").append(title); //nothing showing up in my output DIV, presumably due to the CDATA tags?
     }
}); 

}

Answer 1

Looks like there are two children named title within the nav tag. You are getting back both when you do:

$(this).find("title").text()

Try using:

$(this).find("title:first").text()

Also, remove the conditional:

dataType: ($.browser.msie) ? "xml" : "text/xml",

And just use:

dataType: "xml",