Question

I have two web pages; “Foo.aspx” and “Bar.aspx”. Bar.aspx uses jQuery.ajax() to request a string of data from Foo.aspx. Foo.aspx returns nothing more than

<SerialNumber>12345-ABC</SerialNumber>

Upon a successful return, Bar.aspx will use .find() to display

12345-ABC

Here’s example code (simplified) to makes things clearer:

Bar.aspx

<script type='text/javascript'>
    $(document).ready(function () { 
        getData();    
    });

    function getData() {
        $.ajax({ 
            url: '/Foo.aspx', 
            dataType: 'xml', 
            cache: false, 
            data: {cmd: 'sn'}   
        })
        .success(parseData)
        .error(displayError);  
    }

    function parseData(data) { 
        var sn = $(data).find('SerialNumber').text(); 
        $('#serialNumber').text(sn); 
        window.setTimeout(getData, 1000);  
    }

    function displayError(error) { 
        $('#error').text('Error occurred getting data');  
    }
</script>
<div>
    <label>Serial Number:</label> 
    <label id='serialNumber'></label> 
</div>
<div id='error'></div>

Foo.aspx

public void Page_Load(object sender, EventArgs e)
{
    string response = string.Empty;
    if (Request.QueryString["cmd"] != null)
    {
        switch (Request.QueryString["cmd"])
        {
            case "sn":
                response = "<SerialNumber>12345-ABC</SerialNumber>";
                break;
         }
    }

    Response.Write(response);
    Response.Flush();
}

The $.ajax() call works consistently without any problems. However, depending on what I specify as the dataType: AND depending on what browser type I use (Chrome, Firefox, or IE), the .find() method will or will not work. More specifically, the data 12345-ABC does not get displayed in the browser.

It’s probably important to note that I used Fiddler2 to watch the data come back from Foo.aspx, and the <SerialNumber>12345-ABC</SerialNumber> string is, in fact, returning back to Bar.aspx. In other words, I know that the data is there for the .find() to parse.

Breaking down the dataType and browser results, here’s what I have found:

When dataType = "text or html or script or excluded" – Chrome and Firefox successfully display the serial number. IE, on the other hand, fails to display the serial number.

When dataType = "xml" – IE successfully displays the serial number, but Chrome and Firefox fail to do so.

Why does the dataType affect the way .find() works (or doesn’t) and, more importantly, what can I do to get .find() to work in Chrome/FF/IE without having to run different code based on the browser type?

Answer 1

I suspect that you’re having tag case issues. Can you arrange to have the XML come back with lower case tags?

<serialnumber>12345-ABC</serialnumber>

And then you’d do this in parseData:

var sn = $(data).find('serialnumber').text();

If you can’t change the XML, then try changing just parseData.

Tags in HTML are supposed to be case insensitive but in XML they’re case sensitive. I generally side step the whole case problem by putting all tags in lower case so that I don’t have to deal with browser, parser, or context confusion.