Wrox Programmer Forums

Need to download code?

View our list of code downloads.

| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning JavaScript and CSS Development with jQuery
This is the forum to discuss the Wrox book Beginning JavaScript and CSS Development with jQuery by Richard York; ISBN: 9780470227794
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning JavaScript and CSS Development with jQuery section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old July 8th, 2009, 12:48 PM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default XML AND JQUERY

Hi,

I would appreciate very much if someone could shed some light on how to retrieve a nodeset from an xml document - not the value - and then append the elements within the nodeset to a new xml tree with JQUERY.

By the way, is it possible to create an empty xml document using JQUERY???

I have tried the code below but it is not working as expected. I am not sure how to loop to get all nodes from the set.

$(document).ready(function() {
//debugger
$.get("labels.xml", function(xml) {
//var text = $("name", xml).text();
var text = $("name", xml);
alert(text[0].xml)
//debugger
$("div#xml").html("<Names>" + text[0].xml + "</Names>");
});
});

This is what I get from this code and as you can see, the xml is not well formed.
<DIV id="xml">
<NAMES></NAMES><NAME></NAME>Claudio Pallone</NAME><//NAME></NAMES><//NAMES>
</DIV>

XML USED

<?xml version="1.0" encoding="utf-8"?>
<labels>
<label id='ep' added="2003-06-10">
<name>Ezra Pound</name>
<address>
<street>45 Usura Place</street>
<city>Hailey</city>
<province>ID</province>
</address>
</label>
<label id='tse' added="2003-06-20">
<name>Thomas Eliot</name>
<address>
<street>3 Prufrock Lane</street>
<city>Stamford</city>
<province>CT</province>
</address>
</label>
<label id="lh" added="2004-11-01">
<name>Langston Hughes</name>
<address>
<street>10 Bridge Tunnel</street>
<city>Harlem</city>
<province>NY</province>
</address>
</label>
</labels>


Cheers

C
Reply With Quote
  #2 (permalink)  
Old July 8th, 2009, 02:51 PM
samjudson's Avatar
Friend of Wrox
Points: 8,687, Level: 40
Points: 8,687, Level: 40 Points: 8,687, Level: 40 Points: 8,687, Level: 40
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2007
Location: Newcastle, , United Kingdom.
Posts: 2,128
Thanks: 1
Thanked 189 Times in 188 Posts
Default

text[0] returns a DOMElement, so the method text() does not exist on it. To get access to the text() method you would need either iterate over the nodes using .each() or wrap the new DOMElement in the jquery code:

Code:
$(document).ready(function() {
           $.get("labels.xml", function(xml) {
                 var nodes= $("name", xml);
                 $("div#xml").html("<Names>" + $(nodes[0]).text() + "</Names>");
           });
 });
__________________
/- Sam Judson : Wrox Technical Editor -/

Think before you post: What have you tried?
Reply With Quote
  #3 (permalink)  
Old July 8th, 2009, 06:08 PM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi

Thanks a lot for your reply and sample code.

This is what is being produced by your code. As you can see, this is not the result I was expecting.

<div id="xml">
<names>
Claudio Pallone
</names>
</div>

I would like to build a tree with all name elements and their children from the xml.

Something like:

<names>
<name>Ezra Pound</name>
<name>Thomas Eliot</name>
<name>Langston Hughes</name>
</names>

the text() method gets only the text of the element but not the node and its children. Basically, I am trying to build an xml document.

You mentioned that I could loop each element using the each() method. I was wonderinf if you could provide some source code for us to see how to do that using the xml.

Cheers

C
Reply With Quote
  #4 (permalink)  
Old July 9th, 2009, 02:42 AM
samjudson's Avatar
Friend of Wrox
Points: 8,687, Level: 40
Points: 8,687, Level: 40 Points: 8,687, Level: 40 Points: 8,687, Level: 40
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2007
Location: Newcastle, , United Kingdom.
Posts: 2,128
Thanks: 1
Thanked 189 Times in 188 Posts
Default

Well you didn't actually list what you where expecting, so there is little surprise my example didn't produce it.

Code:
$(document).ready(function() {
    $.get("labels.xml", function(xml) {
        var nodes= $("name", xml);
        var names = $("<names/>");

        $(nodes).each(function() {
            names.append("<name>" + $(this).text() + "</name>");
        });
                 
        $("div#xml").append(names);
    });
});
__________________
/- Sam Judson : Wrox Technical Editor -/

Think before you post: What have you tried?
Reply With Quote
The Following User Says Thank You to samjudson For This Useful Post:
pallone (July 9th, 2009)
  #5 (permalink)  
Old July 9th, 2009, 06:18 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default XML AND JQUERY

Hi samjudson,

Thank you very much for all your assistance with this issues. It is really appreciated.

Sorry for not listing what I was expecting and for not being more clear.

I have seen your new sample code and it works fine if the name element has no attributes or other children since the code hard code the name element. However, for a more complex structure it would not work.

Is it possible to adjust the code around to instead of hard coding the name of the element, we would get it dynamically and include its attributes and child nodes?

For example, the address element of the xml looks like this:

<address id="1">
<street>45 Usura Place</street>
<city>Hailey</city>
<province>ID</province>
</address>

How do I grab all the address elements from the xml with all its attributes and child nodes and append it to a new xml document with a <Locations> root element?

<Locations>
<address id="1">
<street>45 Usura Place</street>
<city>Hailey</city>
<province>ID</province>
</address>
<address id="2">
<street>3 Prufrock Lane</street>
<city>Stamford</city>
<province>CT</province>
</address>
<address id="3">
<street>10 Bridge Tunnel</street>
<city>Harlem</city>
<province>NY</province>
</address>
</Locations>

Thanks again


XML
-------

<?xml version="1.0" encoding="utf-8"?>
<labels>
<label id='ep' added="2003-06-10">
<name>Ezra Pound</name>
<address id="1">
<street>45 Usura Place</street>
<city>Hailey</city>
<province>ID</province>
</address>
</label>
<label id='tse' added="2003-06-20">
<name>Thomas Eliot</name>
<address id="2">
<street>3 Prufrock Lane</street>
<city>Stamford</city>
<province>CT</province>
</address>
</label>
<label id="lh" added="2004-11-01">
<name>Langston Hughes</name>
<address id="3">
<street>10 Bridge Tunnel</street>
<city>Harlem</city>
<province>NY</province>
</address>
</label>
</labels>
Reply With Quote
  #6 (permalink)  
Old July 9th, 2009, 06:58 AM
samjudson's Avatar
Friend of Wrox
Points: 8,687, Level: 40
Points: 8,687, Level: 40 Points: 8,687, Level: 40 Points: 8,687, Level: 40
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2007
Location: Newcastle, , United Kingdom.
Posts: 2,128
Thanks: 1
Thanked 189 Times in 188 Posts
Default

Once you've loaded the XML its just like navigating an HTML document. So ask yourself how would you iterate over a list of DIV elements, gets their width attribute, and then find out what children it has?

Well the same is true here. So you use find(), children(), attr() and all the other jquery goodness to do what you want. If you want name of the current element then just use its name property.
__________________
/- Sam Judson : Wrox Technical Editor -/

Think before you post: What have you tried?
Reply With Quote
The Following User Says Thank You to samjudson For This Useful Post:
pallone (July 9th, 2009)
  #7 (permalink)  
Old July 9th, 2009, 10:36 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default XML AND JQUERY

Hi samjudson,

Based on your sample code and suggestions I have tried the code below but it is not working as expected. It gets the text of the address element but not the xml.

I have tried to remove the text() method call but to no avail

location.append($(this).text());

location.append($(this));

Could you please shed some light on how to get the xml of an object in JQUERY?

$(document).ready(function() {
$.get("labels.xml", function(xml) {
var nodes = $("address", xml);
var location = $("<Location/>");

$(nodes).each(function() {
location.append($(this).text());
//location.append($(this));
});

$("div#xml").append(location );
});
});


This is what this code is producing:

<location>

45 Usura Place Hailey ID 3 Prufrock Lane Stamford CT 10 Bridge Tunnel Harlem NY 7 Heaven's Gate Idoto Anambra

</location>

I am looking forward to your reply.

Cheers,

C
Reply With Quote
  #8 (permalink)  
Old July 10th, 2009, 03:43 AM
samjudson's Avatar
Friend of Wrox
Points: 8,687, Level: 40
Points: 8,687, Level: 40 Points: 8,687, Level: 40 Points: 8,687, Level: 40
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2007
Location: Newcastle, , United Kingdom.
Posts: 2,128
Thanks: 1
Thanked 189 Times in 188 Posts
Default

try something like

location.append("<" + this.name + ">" + $(this).text() + "</" + this.name + ">");
__________________
/- Sam Judson : Wrox Technical Editor -/

Think before you post: What have you tried?
Reply With Quote
  #9 (permalink)  
Old July 10th, 2009, 05:56 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default XML AND JQUERY

Hi

I have changed the code as per your suggestion but I get undefined tags in FF and in IE.

IE seems to close the tags in the wrong place and FF does not respect the case of tags.

Do you think this is happening because we are working with a string of xml?

Cheers

IE RESULT
--------------------

<Location><UNDEFINED></UNDEFINED>45 Usura PlaceHaileyID</UNDEFINED><//UNDEFINED><UNDEFINED></UNDEFINED>3 Prufrock LaneStamfordCT</UNDEFINED><//UNDEFINED><UNDEFINED></UNDEFINED>10 Bridge TunnelHarlemNY</UNDEFINED><//UNDEFINED><UNDEFINED></UNDEFINED>7 Heaven's GateIdotoAnambra</UNDEFINED><//UNDEFINED></Location>

FF RESULT
------------------
<location>
<undefined>
45 Usura Place Hailey ID
</undefined>
<undefined>
3 Prufrock Lane Stamford CT
</undefined>
<undefined>
10 Bridge Tunnel Harlem NY
</undefined>
<undefined>
7 Heaven's Gate Idoto Anambra
</undefined>
</location>
Reply With Quote
  #10 (permalink)  
Old July 10th, 2009, 06:22 AM
samjudson's Avatar
Friend of Wrox
Points: 8,687, Level: 40
Points: 8,687, Level: 40 Points: 8,687, Level: 40 Points: 8,687, Level: 40
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2007
Location: Newcastle, , United Kingdom.
Posts: 2,128
Thanks: 1
Thanked 189 Times in 188 Posts
Default

well obviously this.name isn't a valid property, so try finding the correct property and using that. I've given you all the help I think you need and I think it would help you much more if you tried to finish this last little bit on your own.
__________________
/- Sam Judson : Wrox Technical Editor -/

Think before you post: What have you tried?
Reply With Quote
The Following User Says Thank You to samjudson For This Useful Post:
pallone (July 10th, 2009)
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
jQuery Related Problems sakshamgautam BOOK: Professional ASP.NET MVC 1.0 ISBN: 978-0-470-38461-9 1 June 13th, 2009 08:20 PM
Article: Using the jQuery Selectors API jminatel BOOK: Beginning JavaScript and CSS Development with jQuery 0 April 20th, 2009 11:58 AM
Jquery html() on IE browser jspach2000@yahoo.com Javascript 0 March 28th, 2009 12:16 AM
call WCF Service using JQuery but without using AJAX informit BOOK: Professional WCF Programming: .NET Dev with Windows Communication Found ISBN: 9780470089842 0 February 23rd, 2009 01:33 AM
Article: jQuery with ASP.NET 3.5 SP1 jminatel ASP.NET 3.5 Professionals 0 February 19th, 2009 10:01 PM



All times are GMT -4. The time now is 03:24 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.