Load DynaTree Dynamically

Question

I have a dynatree which I want to load the tree data dynamically. I am using this in conjunction with the jquery accordion. I'm using a for each loop to populate div's but this will be better for illustartion. Here are my divs

<div id="accordion">
<h3>Project Type</h3>
     <div id="1" class="common" style="height:150px;"> 
    </div>

     <h3>Ammenities</h3>
    <div id="2" class="common" style="height:150px;">  
    </div>
</div 

I want to pass the id of div to the initajax function of the tree. I am getting the ID like this.

        $(".common").prev('h3').click(function () {
          currentID = $(this).next().attr("id");

I would like to pass currentID to this function

 var URL = "/Home/GetProjectTypeData/?currentID"
$(".common").dynatree({
    checkbox: true,
    icon: false,      
    initAjax: {
        type: "POST",
        url: URL + '=' + currentID,
        data: {},
    },

I've tried a couple different things, with no luck. Ideally I want each div to be populated with the tree view on click of the accordion header Thank you

Answer 1

Assuming that the GetProjectTypeData action takes a parameter called id then this should work:

$(".common").prev('h3').click(function() {

    var $tree = $(this).next('.common');

    var currentId = $tree.attr("id");

    $tree.dynatree({
        checkbox: true,
        icon: false,
        initAjax: {
            type: "POST",
            url: '/Home/GetProjectTypeData',
            data: { id : currentId }
        }
    });
});