Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Querying an xml file using jquery

Posted on 2010-09-05
7
Medium Priority
?
686 Views
Last Modified: 2012-05-10
Another newbie-to-jquery question.  I can code C# and Flash ActionScript 3, but I'm still spinning up on jquery...

I'm trying to load an XML file and access specific data elements within it.  I'm following the example at http://www.switchonthecode.com/tutorials/xml-parsing-with-jquery and others that all report the same idea.  I'm missing something, and I'm sure it's obvious.

Here's my code, and the xml I'm testing with.
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Test search</title>
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript">

			function searchXml( xml )
			{
				alert( 'searchXml.  xml = ' + xml );
				//search = '*';
				search = "[name='h'][blah='feh']";
				xml.find(search).each( function() { alert( 'yippie' ); } );
				xml.find(search).each( function() { alert( $(this) ); } );
			}
			
			function searchClicked()
			{
				alert( 'Search clicked' );
				var options = 
				{
					type: 'GET',
					url: 'test.xml',
					dataType: ($.browser.msie) ? 'tt' : 'xml',
					success: searchXml
				};
				$.ajax( options);
			};
				
			function documentReady()
			{
				$('#seqSearch').click( searchClicked );
			};
				
			$(document).ready( documentReady );
        </script>
        
</head>

<body>
<div id="leftPane" class="ui-widget-content">
	<div id="leftPanel">
		<div>
			<form action=""> 
				<button id="seqSearch">Search</button>
			</form>
		</div>
	</div>
</div>				
</body>
</html>

Open in new window


 
<?xml version="1.0" encoding="UTF-8"?>
<abc>
	<def>def 1</def>
	<def>def 2</def>
	<def>def 3</def>
	<def name="h">named def h</def>
	<def name="i">named def i</def>
	<def name="h" blah="feh">named def h feh</def>
	<def>
		<def>embedded</def>
		<ghi>ghi</ghi>
		<ghi name="g">ghi named g</ghi>
	</def>
</abc>

Open in new window


In IE, the alert statements at the top of both the searchClicked statement and the searchXml statement fire off.  The xml that is displayed is correct.  I've not ever gotten one of the find(..).each blocks to work, whether I search for * or anything else.  Ideally, I want to find something along the lines of what the code is searching for right now.  When I run in Firefox, I never even see the statement from searchXml.  searchClicked fires, but searchXml apparently does not.

So, two questions:

1. What am I doing wrong for search not to work?  I'm sure it's a simple thing I just haven't caught on to.
2. Why doesn't this code run the same way in firefox.

Files are attached at the bottom for easy testing/playing with.  Thanks for your time!

testFind.html
test.xml
0
Comment
Question by:Carnou
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 2000 total points
ID: 33607881
You need an jquery object to use jquery function, so replace : xml.find
By : $(xml).find

You "button" object post the form, you need to prevent this by using, for example, e.preventDefault() or use a simple input button (type) : http://api.jquery.com/event.preventDefault/

           function searchClicked(e)
            {
                e.preventDefault();



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Test search</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
		<script type="text/javascript">

			function searchXml( xml )
			{
				alert( 'searchXml.  xml = ' + xml );
				//search = '*';
				search = "[name='h'][blah='feh']";
				$(xml).find(search).each( function() { alert( 'yippie' ); } );
				$(xml).find(search).each( function() { alert( $(this) ); } );
			}

			function searchClicked(e)
			{
				e.preventDefault();
				alert( 'Search clicked' );
				var options = 
				{
					type: 'GET',
					url: 'test.xml',
					dataType: ($.browser.msie) ? 'tt' : 'xml',
					success: searchXml,
				};
				$.ajax(options);
			};
				
			function documentReady()
			{
				$('#seqSearch').click( searchClicked );
			};
				
			$(document).ready( documentReady );
        </script>
        
</head>

<body>
<div id="leftPane" class="ui-widget-content">
	<div id="leftPanel">
		<div>
			<form action=""> 
				<button id="seqSearch">Search</button>
			</form>
		</div>
	</div>
</div>				
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33607913
if you need to get the data of the selected node :


$(xml).find(search).each( function() { alert( $(this).text() ); } );

Open in new window

0
 
LVL 10

Accepted Solution

by:
Carnou earned 0 total points
ID: 33609961
Hi, Lekim971,
Thanks for your help.  The preventDefault function works like a charm - it now loads in Firefox, and changing it to $(xml) makes it run the find command properly.  So, it works fine in Firefox, and your second posting will be a great help in my next steps in debugging.
But in IE, I still have issues.  It doesn't get any further than it did before - it gets into the searchXml function, but find.each comes up with nothing.
As I was searching for my reference as to why I had special case code for IE, I found the remaining solution at http://www.switchonthecode.com/tutorials/xml-parsing-with-jquery.  Namely, the searchXml function should look like the attached code.
Yay special casing for Microsoft.
Between your help and this site, I've now gotten past this step.
Thanks for getting me there!

function searchXml( xml )
			{
				alert( 'searchXml.  xml = ' + xml );
				
				if ($.browser.msie)
				{
					var xml_doc = new ActiveXObject( "Microsoft.XMLDOM" );
					xml_doc.loadXML( xml );
					xml = xml_doc;
				}
				//search = '*';
				search = "[name='h'][blah='feh']";
				$(xml).find(search).each( function() { alert( 'yippie' ); } );
				$(xml).find(search).each( function() { alert( $(this) ); } );
			}

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Author Comment

by:Carnou
ID: 33609984
Oy.
Note to mods, cause this will pop up eventually:
I intended to close this question with full points to ID 33607881 and a ranking of A, but with my message 33609961 as an assisted, zero-point solution.
Thanks!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33610676
Question not closed as the asker would want it :

<< I intended to close this question with full points to ID 33607881 and a ranking of A >>
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33652782
Thanks for the points! Have a good week-end!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question