How to add click event to jstree's(jQuery plugin) asynchronous list?

Question

I want to add click event to jstree's asynchronous list items.

The ideal result is: when i click the items in the jstree, the content of the item will be transfered to a sql query as a parameter, and then, the query is executed and display a result set in the same page or in another page.

While I don't know how to implement it. I found the following code in jquery.tree.js. And I think I should modify the event. But i don't know how. Can you see the code and give me some suggestions or guidance?

$("#" + this.container.attr("id") + " li a")
 .live("click.jstree", function (event) { // WHEN CLICK IS ON THE TEXT OR ICON
  if(event.which && event.which == 3) return true;
  if(_this.locked) {
   event.preventDefault(); 
   event.target.blur();
   return _this.error("LOCKED");
  }
  _this.select_branch.apply(_this, [event.target, event.ctrlKey || _this.settings.rules.multiple == "on"]);
  if(_this.inp) { _this.inp.blur(); }
   event.preventDefault();
   event.target.blur();
   return false;
  })

The page code:

<script type="text/javascript" >
    $(function () { 
        $("#async_json_1").tree({
            data : { 
                type : "json",
                opts : {
                    url : "twodimen.php"
                }
            },
            callback:{
                onselect: function(node,tree){

                }
            }
        });
    });
</script>

Thanks very much.

Solution

You could use the callback method onselect which usually takes place when the node is clicked (even though you can also select it by script)

if your nodes (the li) have an id of the form "node_1234", then:

<script type="text/javascript" >
 $(function () { 
  $("#async_json_1").tree({
   data : { 
    type : "json",
    opts : {
     url : "twodimen.php"
    }
   },
   callback: {
      onselect: function(node, tree) {
         var id = $(node).attr("id").split("_")[1]; // that is 1234
         $.ajax({
            url: "your/url",
            data: "id="+id,
            success: function(data){
               alert("Great");
            }
         });
      }
   }
  });
 });
</script>

---

I just realized, that there is also an even simpler way of doing what you need:

<script type="text/javascript" >
 $(function () { 
  $("#async_json_1").tree({
   data : { 
    type : "json",
    opts : {
     url : "twodimen.php"
    }
   }
  });
  $(".tree a").live("click", function(e) {
     // your code here
  }) 
 });
</script>

Comments

[SUN Jiangong]

@Harpax, thanks. I need to do some DOM manipulation in the onselect section?

[harpax]

if I understood your question correct, then no .. you can get the nodes id (the id from the li) simply with $(node).attr("id") and use that for the ajax call to do your db-query