Not able to get href attribute onClick when the tree is loaded using XML

[Sullan]

Hi All,
I am stuck with a weird problem. I'm loading the tree from an XML
file, and there is href value and selector (.treeLinks) added to it.
When i click on the tree nodes, i am getting the href value of it and
loading that particular url in a div (#content). This works fine when
i put dummy alert statement before the click event. What is that i am
doing wrong here. Code is as follows....

Part of the XML Code
-----------------------------------
<root>
<item id="pxml_5">
<content>
<name class="treeLinks" href="ContentArea2.html"><![CDATA[Root node
2]]></name>
</content>
</item>
</root>

jQuery Code
-----------------------------------
$(document).ready(function(){
$("#demo1").jstree({
"xml_data" : {
"ajax" : {
"url" : "xml_url.xml"
},
"xsl" : "nest"
},
"plugins" : [ "themes", "xml_data", "crrm", "contextmenu", "dnd",
"ui" ]
});

$("#demo1").bind("create_node.jstree delete_node.jstree
rename_node.jstree", function ()
{
var xmlData = $("#demo1").jstree("get_xml");
alert(xmlData);
$.ajax({
url: "Sample Tree.html",
processData: false,
data: xmlData,
success: function(data) {
//$('#result').html(data);
alert(xmlData);
},
error: function(data) {
alert("error");
}
});
});

alert("If this Alert is removed, the url from href attribute is not
getting alerted, hence the url is not loaded in the #content div");
$('.treeLinks').click(function() {
var url = $(this).attr('href');
alert(url);
$('#content').load(url);
});

});

[Niyak]

Hi Sullan,

your "dummy alert" gets fired when the document is loaded, which is
the same time you START loading your tree and you bind the click
event. However, neither is the tree loaded immediatly, nor does the
script wait until it is loaded, so you actually bind before the tree
is loaded, thus binding to non-existing elements.

You have three options here to solve this:

- bind the jstree event of select_node and access the node properties
to find your href
$('#demo1').bind('select_node.jstree', yourfunction)

- bind "loaded.jstree" event which is triggered after the tree is
fully loaded and bind your click event in there.

- use .live() to bind your event, which binds to all existing and
future elements that match the selector (see jQuery docs for details).
$('.treeLink').bind('click', yourfunction);

[Anwar Sadath]

Hi Niyak,

Thanks for the reply...
Now i am using this code to get the selected node href attribute, but i get the alert message as "undefined". But when I try to get the "id" attribute instead of href to this code, this works... can you tell me where i am going wrong.

$("#demo1").bind('select_node.jstree', function(event, data) {
        alert(data.rslt.obj.attr("href"));
});

--
You received this message because you are subscribed to the Google Groups "jsTree" group.
To post to this group, send email to jst...@googlegroups.com.
To unsubscribe from this group, send email to jstree+un...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jstree?hl=en.

--
Thanks & Regards
Anwar Sadath
+91 9886763751

[Anwar Sadath]

Hi Niyak,

When i changed the code to this, it works fine.. thanks a lot... :-)

$("#demo1").bind('select_node.jstree', function(event, data) {

        var url = data.rslt.obj.children("a:eq(0)").attr("href");
        alert(url);
});