Modal Popup For Updating And Adding Row To Datagrid

Hi
I am not able to understand what's going wrong in my code

<div class="span12">
<div class="caption">Project Details</div>
<table style="background:#cccccc; margin:0px;">
<thead>
<tr>
<th>Name</th>
<th>Plan (Start-End)</th>
<th>Actual (Start-End)</th>
<th>Description</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php foreach($dpPrjdetails->getData() as $prjdetail) { ?>
<tr class="well">
<td><strong><?php echo $prjdetail->PDSTName ?></strong></td>
<td>
<?php $this->widget('bootstrap.widgets.TbButton', array(
'label'=>'Edit',
'buttonType'=>'button',
'type'=>'inverse',
'size'=>'small',
'htmlOptions'=>array(
'class'=>'editStage',
'data-toggle'=>'modal',
'data-target'=>'#editStageForm',
'data-pdid'=>$prjdetail->PDId,
),
)); ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>

<div id="editStageForm" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Edit Stage</h3>
</div>
<div class="modal-body">
<?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm',
array('id'=>'prjdetails-update-form',
'type'=>'horizontal','enableAjaxValidation'=>false,)); ?>
<fieldset>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<?php echo $form->errorSummary($prjDetailsRec); ?>

<?php echo $form->textFieldRow($prjDetailsRec,'PDSTName',array('size'=>50,'maxlength'=>50)); ?>
<?php echo $form->error($prjDetailsRec,'PDSTName'); ?>

</fieldset>
<div class="form-actions">
<?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'submit',
'type'=>'primary', 'label'=>'Submit')); ?>
<?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'reset',
'label'=>'Reset')); ?>
</div>
<?php $this->endWidget(); ?>
</div>
<div class="modal-footer">
</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
//editStage
$(document).on("click", ".editStage", function () {
var reckey = $(this).data('pdid');
alert('projdetail id = ' + pdid);
if(reckey){
$.ajax({
url: '<?php echo $this->createUrl('prjectdetails/getstagetask') ?>',
data: 'id='+reckey,
dataType: 'json',
cache: false,
success: function(data) {
if(data) {
alert('got data ' + data.PDSTName);
$(".modal-body #Prjdetails_PDSTName").val(data.PDSTName);
};
};
});
};
});
});

})
</script>
My alert in jquery is not getting fired don't know why

regards
Girish