views:

47

answers:

1

Hi All, I am naive jQuery programmer, so somebody please help me out with this problem. The first example shows what i am doing and its working. But my dilemma is that the list is created by parsing a XML. If so how would i parse the xml, find the 'title' attribute and then load the corresponding url into a Div. Thanks in advance...

jQuery code

 $('.treeLinks').click(function() {
    var sourceURL = $(this).attr('title');
    $('#content').load(sourceURL);
    });

Corresponding HTML Code

<ul>
<li><a href="#" title="contentArea1.html" class="treeLinks">Link 1</a></li>
<li><a href="#" title="contentArea2.html" class="treeLinks">Link 2</a></li>
</ul>

XML code which needs to be parsed for getting the title attribute

<?xml version="1.0" encoding="UTF-8"?>
<root>
<item id="pxml_1">
  <content><name class="treeLinks"><![CDATA[Root node 1]]></name></content>
 <item id="pxml_2">
 <content><name class="treeLinks"><![CDATA[Child node 1a]]></name>
 <item id="pxml_23">
 <content><name><![CDATA[Child node 1a]]></name></content>
 </item>
 </content>
 </item>
 <item id="pxml_3">
 <content><name><![CDATA[Child node 2b]]></name></content>
 </item>
 <item id="pxml_4">
 <content><name><![CDATA[Child node 3c]]></name></content>
 </item>
</item>
</root>
A: 

Parse your XML the same way you would html (there's really nothing special about it); This works in Firefox (not sure why IE didn't like it). Save as an .html file for an example.

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
        //Document Ready: Everything inside this function fires after the page is loaded
        $(document).ready(function () {
            var test = '<?xml version="1.0" encoding="UTF-8"?><root><item id="pxml_1"><content><name class="treeLinks"><![CDATA[Root node 1]]></name></content> <item id="pxml_2"> <content><name class="treeLinks"><![CDATA[Child node 1a]]></name> <item id="pxml_23"> <content><name><![CDATA[Child node 1a]]></name></content> </item> </content> </item> <item id="pxml_3"> <content><name><![CDATA[Child node 2b]]></name></content> </item> <item id="pxml_4"> <content><name><![CDATA[Child node 3c]]></name></content> </item></item></root>';

            //Need to wrap you xml with a root node
            test = "<wrapper>" + test + "</wrapper>";

            $(test).find('.treeLinks').each(function(){
                alert($(this).html());
            });
        });
    </script>
</head>
<body>
</body>
</html>

The rest of your question wasn't really clear. I couldn't figure out how your xml is creating the links above. If you can, clarify the relationship between the XML and your links.

Hope this gets your started!

Brandon Boone
@Brandon Thanks.. :-), it worked, but since i am using an external file this wont help me. I am passing the href to the title attribute within the xml file which will contain the link "ContentArea1.html". I have done this sample which find the title, but how do i trigger it on a click event.. the sample is as follows in the next comment
Sullan
$.ajax({url: "sample.xml", dataType: "xml", success: function(data){ $(data).find("item").each(function() { alert($(this).attr("title")); }); } });
Sullan
@Sullan, Something still isn't clear to me. It sounds like you're getting an XML file (via ajax) and generating a list of Links from that XML file. Then when the User clicks on a link the #Content area is loaded with whatever content that link provided... That said, I don't see any links in your XML at all (or any title attributes that you refer to). Frankly, I'm not even sure what it's purpose is based off your example above (what does it contain / what does it contribute to the process?). It would be helpful if you could clarify a bit more.
Brandon Boone