I have two CGridView with draggable and droppable feature. They work fine at the first time page reload, but not after AJAX refresh. I call AJAX refresh via dropdown list:
<div id="target">
<?php
// register JQuery UI
Yii::app()->clientScript->registerCoreScript('jquery.ui');
// draggable script
Yii::app()->clientScript->registerScript('drag', "
$('#first-container-grid tbody tr td').draggable({
helper: 'clone',
opacity: 0.8,
revert: 'invalid',
cursor: 'move',
containment: '#right-column'
});
// draggable script for second grid (omitted)
");
// droppable script
Yii::app()->clientScript->registerScript('drop', "
$('#first-container-grid tbody tr td').droppable({
accept: 'tbody tr td',
activeClass: 'ui-droppable-active',
hoverClass: 'ui-droppable-hover',
drop: function(ev, ui) {
alert('drop');
return false;
}
});
// droppable script for second grid (omitted)
");
?>
<?php
echo CHtml::beginForm();
echo CHtml::dropDownList('first_filter', ($firstContainer->id != 0) ? $firstContainer->id : '', Container::getContainerList(), array(
'onChange'=>CHtml::ajax(array(
'url'=>Yii::app()->urlManager->createUrl('containerDetail/admin'),
'update'=>'#target',
'type'=>'GET',
'beforeSend'=>'function(){
$("#target").addClass("loading");
}',
'complete'=>'function(){
$("#target").removeClass("loading");
}',
'data'=>array(
'filter'=>1,
'id1'=>"js:$(this).val()",
'id2'=>"js:$('#second_filter').val()"
)
)),
));
$this->widget('zii.widgets.grid.CGridView', array(
'id'=>'first-container-grid',
'dataProvider'=>$firstModel->search(!empty($_GET['id1']) ? $firstContainer->id : 0),
'filter'=>$firstModel,
'summaryText'=>'Total Cubic Meters: '.$firstContainer->total_cubic,
'columns'=>array(
…..
),
));
echo CHtml::dropDownList('second_filter', ($secondContainer->id != 0) ? $secondContainer->id : '', Container::getContainerList(), array(
'onChange'=>CHtml::ajax(array(
'url'=>Yii::app()->urlManager->createUrl('containerDetail/admin'),
'update'=>'#target',
'type'=>'GET',
'beforeSend'=>'function(){
$("#target").addClass("loading");
}',
'complete'=>'function(){
$("#target").removeClass("loading");
}',
'data'=>array(
'filter'=>2,
'id1'=>"js:$('#first_filter').val()",
'id2'=>"js:$(this).val()"
)
)),
));
$this->widget('zii.widgets.grid.CGridView', array(
'id'=>'second-container-grid',
'dataProvider'=>$secondModel->search(!empty($_GET['id2']) ? $secondContainer->id : 0),
'filter'=>$secondModel,
'summaryText'=>'Total Cubic Meters: ' .$secondContainer->total_cubic,
'columns'=>array(
…..
),
));
echo CHtml::endForm();
?>
</div>
I render the page in my controller:
public function actionAdmin()
{
.... (some logic here)
if (isset($_GET['filter']))
{
$this->renderpartial('admin',array(
'firstModel'=>$firstModel,
'firstContainer'=>$firstContainer,
'secondModel'=>$secondModel,
'secondContainer'=>$secondContainer,
));
}
else
{
$this->render('admin',array(
'firstModel'=>$firstModel,
'firstContainer'=>$firstContainer,
'secondModel'=>$secondModel,
'secondContainer'=>$secondContainer,
));
}
}
How to make those CGridView become draggable again after AJAX refresh?
