Link to home
Start Free TrialLog in
Avatar of josephdaviskcrm
josephdaviskcrmFlag for United States of America

asked on

jQuery - how to parse XML retreived from AJAX request

I've got the following jQuery code that performs an AJAX request...

    $.ajax({
        url: "Services/PageMetaData.aspx?id=" + this.windowID,
        dataType: "xml",
        success: function (data) {
           
        }
    });

I have already verified that the AJAX request is successfully returning the following XML...

<?xml version="1.0" encoding="utf-16" standalone="yes"?>
<!--Created at: 2010-06-19 05:56:44-->
<pageMetaData>
    <pageID>1</pageID>
    <pageUrl>Pages/TestPage.aspx</pageUrl>
    <pageTitle>Testing Page</pageTitle>
    <imageUrl>Images/Stock/testingIcon.png</imageUrl>
    <defaultWidth>400</defaultWidth>
    <defaultHeight>350</defaultHeight>
</pageMetaData>

My question is, how do I use jQuery to parse the data out of the XML?
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Avatar of josephdaviskcrm

ASKER

I already found this page and am having trouble getting it to work.

I've posted the xml that I'm getting back from the ajax. Then in the success function I've got the following code...

$(data).find("pageMetaData").each(function() {
   alert('found it');
}

based on this code and the xml being returned I would expect to have the alert go off. But I'm not getting anything.  Can you tell what I'm doing wrong?
>Can you tell what I'm doing wrong?

I have already verified that the AJAX request is successfully returning the following XML...
How ?

The following work fine for me :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$.ajax({
			url: "book.xml",
			dataType: "xml",
			success: function (data) {
				$(data).find("pageMetaData").each(function() {
					alert( $(this).find("pageID").text() );
					alert( $(this).find("pageUrl").text() );
					alert( $(this).find("pageTitle").text() );
					alert( $(this).find("imageUrl").text() );
					alert( $(this).find("defaultWidth").text() );
					alert( $(this).find("defaultHeight").text() );
				});
			}
		});
	});
</script>
</head>
<body>
</body>
</html>

Open in new window

I already found this page and am having trouble getting it to work.

I've posted the xml that I'm getting back from the ajax. Then in the success function I've got the following code...

$(data).find("pageMetaData").each(function() {
   alert('found it');
}

based on this code and the xml being returned I would expect to have the alert go off. But I'm not getting anything.  Can you tell what I'm doing wrong?
>Can you tell what I'm doing wrong?
I used your code and your xml...

without additional element I can't help you
try this to start :


$.ajax({
        url: "Services/PageMetaData.aspx?id=" + this.windowID,
        dataType: "xml",
        success: function (data) {
            alert("ok");
        }
    });

Open in new window

Sorry guys, when I was trying to correspond earlier it was on my cell phone and it wasn't working out too well.

OK, to answer your question about how I know I'm getting the XML response back.... Let me rephrase that and say that I know the following:

When I change the AJAX data type to text and pump the response into a div tag like this

$.ajax({
    url: "Services/PageMetaData.aspx?id=" + this.windowID,
    dataType: "text",
    success: function (data) {
        $('#WindowsContainer').text(data);
    }
});

The XML appears in the div tag just as I would expect.

Now, when I change the dataType to XML and put an alert in there as was suggested

$.ajax({
    url: "Services/PageMetaData.aspx?id=" + this.windowID,
    dataType: "XML",
    success: function (xml) {
        alert('got it');
    }
});

The alert does fire off correctly.  But when I start parsing through the XML as was shown

$.ajax({
    url: "Services/PageMetaData.aspx?id=" + this.windowID,
    dataType: "XML",
    success: function (xml) {
        $(xml).find("pageMetaData").each(function () {
            alert($(this).find("pageID").text());
        });
    }
});

I'm getting no alert.  So it looks like the problem is occuring when I try to use the find method, or somewhere on that line.  Is there a jQuery extension that I need to include to make this work?

Or maybe there is a problem with the XML?  The XML being returned when the datatype property is set to text is exactly what I have posted above in the earlier post.  Is that not clean XML?
>>I already found this page and am having trouble getting it to work.
OK, then if you already implemented what that link suggests then the client/browser side script is OK. So turn your attention to the server script.  On your server-side script, BEFORE you begin sending any output, make sure you specify the proper mime type - text/xml:



<%
Response.ContentType="text/xml"
%>
<?xml version="1.0" encoding="utf-16" standalone="yes"?>
<%
...
%>

Open in new window

OK, now that I read your last post, it DOES sound like the problem is the mime-type like I suggested above. Make sure you are specifying:

Response.ContentType="text/xml"


before you begin sending any output.
Adding the Content Type to set the mime-type didn't seem to have any positive influence.

I stepped through the code on the server side and copied out the string that is being sent back down to the client.  Once again, it is...

<?xml version=\"1.0\" encoding=\"utf-16\" standalone=\"yes\"?><!--Created at: 2010-06-21 09:04:55--><pageMetaData><pageID>1</pageID><pageUrl>Pages/TestPage.aspx</pageUrl><pageTitle>Testing Page</pageTitle><imageUrl>Images/Stock/testingIcon.png</imageUrl><defaultWidth>400</defaultWidth><defaultHeight>350</defaultHeight></pageMetaData>

The code I'm using to override the response is...

Response.Clear();
Response.ContentType = "text/xml";
Response.Write(pmd.getResponse());

pmd.getResponse() is what returns the XML above.
using firefox, try loading the aspx script directly. Do you get an error (xml parsing error)? If yes, then the problem is the markup. If no, then try REMOVING the following two lines:

<?xml version="1.0" encoding="utf-16" standalone="yes"?>
<!--Created at: 2010-06-19 05:56:44-->
it seems to work fine in Firefox, but on IE, this is causing the problems:
 encoding="utf-16"

changing that to
 encoding="utf-8"

or getting rid of it completely seems to work.
I'm testing in firefox and haven't even looked at this yet in IE actually.

I tried removing the header and the comment line and it didn't have any effect.  I also took the XML output and created a static XML file with it.  When I tried to access it directly I'm still not having any luck with the XML parsing.
ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Ok, I figured out what I was doing wrong and I have it fixed and working now.

I had the dataType set as "XML" (uppercase).  It needs to be lowercase "xml".
Thanks,