CODEWITHSUNDEEP
jquerycross-browser
FL
FL

Reputation:

Processing XML with jQuery cross-browser

I am new to jQuery and am having cross-browser inconsistencies. I am trying to populate an HTML drop down using jQuery to parse the XML document. Eventually, I will swap the XML document with an HTTP call, but for now, I am doing a GET of the local XML copy. My approach works in Firefox (2 elements show up in the drop down) but IE7 isn't processing the XML as desired. IE7 doesn't seem to be parsing the XML at all.
Here is my snippet:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="jquery-1.3.2.js"></script>

<title>test</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script>

    $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "data.xml",
            dataType: ($.browser.msie) ? "text/xml" : "xml",
            success: function(xml) {
                var select = $('#aoi');
                $(xml).find('area').each(function() {
                    var name = $(this).find('name').text();
                    var type = $(this).find('type').text(); 
        //alert(name + " : " + type);
                    select.append("<option>" + name + " : " + type + "</option>");
                });
                select.children(":first").text("please make a selection").attr("selected", true);
            }
        });
    });

</script>

</head>
<body>
    <form id="form1" method="post" >
    <table border=".1" cellpadding="7" cellspacing="1" align="center" width="600" style="border-collapse: collapse;">

    <tr>
        <td>Shape</td>
        <td>
            <select id="aoi">
                <option>loading</option>
            </select>
        </td>
    </tr>
</table>

</form>

</body>
</html>

And the XML file (data.xml) is:

<?xml version="1.0" encoding="ISO-8859-1"?>  
<areasofinterest>  
  <area id="1">  
    <id>1</id>  
    <name>square</name>  
    <type>UserDefined</type>  
  </area>  
  <area id="2">  
    <id>2</id>  
    <name>small square</name>  
    <type>UserDefined</type>  
  </area>  
</areasofinterest>

Thank you for your help!

Upvotes: 1

Views: 2344

Answers (2)

user225608
user225608

Reputation:

hi i have used the following function for IE to load the xml.

function load_xml(msg)
{   //this function will load xml even used in IE or any other browser
    if ( typeof msg == 'string') {
                   data = new ActiveXObject( 'Microsoft.XMLDOM');
           data.async = false;
           data.loadXML( msg);
        } else {
          data = msg;
        }
        return data;
}




$(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "data.xml",
            dataType: ($.browser.msie) ? "text/xml" : "xml",
            success: function(xml) {
                 *//call the function here and pass the xml document to it*
               var xml2=load_xml(xml);
                var select = $('#aoi');
                $(xml2).find('area').each(function() {
                    var name = $(this).find('name').text();
                    var type = $(this).find('type').text(); 
                //alert(name + " : " + type);
                    select.append("<option>" + name + " : " + type + "</option>");
                });
                select.children(":first").text("please make a selection").attr("selected", true);
            }
        });
    });

Upvotes: 2

searlea
searlea

Reputation: 8378

Have you tried replacing dataType: ($.browser.msie) ? "text/xml" : "xml", with dataType: "xml"?

The dataType is a hint for jQuery... I can't see anything in the code-base where text/xml is used... it should be xml regardless of browser!

Upvotes: 0

Related Questions