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?
     }
}); 

}

Revolver

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",

Runin

oh thanks. the dataType did the trick. d'oh! but IE6 won't display anything now. any ideas? – Revolver

Are you testing this locally? IE6 doesn't seem to like that. Probably because the correct headers aren't being sent as they are when they are on a web server. Try putting the XML file on a webserver or use this to test: digitalpadin.com/test.xml Source: groups.google.com/group/jquery-en/browse_thread/thread/… – Runin

it's all running on a web server. – Revolver

Answer 2

<PRODUCTS>
  <COD>1</COD>
  <NAME><![CDATA[MINISYSTEM SONY VAIO]]></NAME>
</PRODUCTS>


        function CDATA(str){            
            var res = str.substr(9,str.length-12)
            return res
        }

        CDATA($(this).find("name").text());

Lx

Please add more detail. – Buenabuenaventura

Answer 3

OK found the missing piece on another forum:

<script type="text/javascript"> instead of: <script type="application/javascript">

Revolver