在yii中更新cgridview后，Jquery UI可排序无法正常工作

Question

I am working on project which runs on AJAX based requests(No Reload). Jquery sortable is working fine until we update cgridview, after that it is not working.

Also if i am sorting multiple times, then it stops working. This page have lots of image list.

I have a code like below :|

index.php

//Get image details
foreach($arrContent as $key => $value) {
    ob_start();
        $this->widget('ImageWidget',array('imageModel'=>new Images(),'entityType'=>$key,'entityTypeId'=>$specModel->spec_id,'type'=>'View'));
        $arrContent[$key] = ob_get_contents();
    ob_end_clean();
    ob_start();
        $this->widget('ImageWidget',array('imageModel'=>new Images(),'entityType'=>$key,'entityTypeId'=>$specModel->spec_id,'type'=>'Form'));
        $arrContent[$key] .= ob_get_contents();
    ob_end_clean();
}

ob_start();
    $this->widget('BrochureWidget',array('brochureModel'=>new Brochure(),'entityType'=>"SPEC", 'entityTypeId'=>$specModel->spec_id,'type'=>'Form'));
    $brochureContent .= ob_get_contents();
ob_end_clean();

$this->widget('zii.widgets.jui.CJuiTabs',array(
    'tabs'=>array(
        "Brochure({$countBrochure})"=>array(
            'content'=>$brochureContent,
        ),
        "Elevation Images({$countElevationImages})"=>array(
            'content'=>$arrContent['SPEC_ELEVATION']
        ),
    ),
)
.............................
............................

ImageViewWidget

<?php   
..........................  
........................   

             Yii::app()->clientScript-> registerScript("draggable-$this->entityType-$value", false);

$draggable = "sortGrid('image-grid-$this->entityType-$value', '{$sortUrl}')";

Yii::app()->clientScript->registerScript("draggable-$this->entityType-$value", $draggable);

$this->widget('zii.widgets.grid.CGridView', array(
            'id'=>"image-grid-$this->entityType-$value",
            'ajaxUrl'=>Yii::app()->createAbsoluteUrl('bdxFeed/images',array('entityType'=>$this->entityType,'entityTypeId'=>$this->entityTypeId)),
            //'rowCssClassExpression'=>'"items[]_{$data->image_id }"',
            'rowHtmlOptionsExpression'=>'array("rel"=>"items[]_{$data->image_id}")',
            'dataProvider'=>$dataProvider,
            'afterAjaxUpdate' => 'sortGrid',
            'htmlOptions'=> array(
                'style'=>'padding:0px',
            ),
            'columns'=>array(

            ........................
            ........................

ImageFormwidget

<?php
........................
........................
$submitForm = <<< EOJ
$('#image-form-{$this->entityType}').on('submit',function() {
    var URL = '{$url}';
        $.ajax({
            type:'post',
            url : URL,
            data:new FormData(this),
            dataType:'json',
            contentType:false,
            processData:false,
            cache:false,
            success:function(response){
                if(response.status == 1) {
                    if(imageType != "" && response.new)
                        $('#images #gridViews').html(response.html);

                    $('#imageFail').hide();
                    $('#imageSucc').html(response.message);
                    $('#imageSucc').show();
                    updateCount();
                    $('#communityLoader').hide();

                    gridId = "image-grid-$this->entityType";

                    if(imageType != '') {
                        gridId += "-" + imageType;
                    }
                    //Update gridviwe for newly inserted record
                    if(!response.new || imageType == '')
                    {
                        $.fn.yiiGridView.update(gridId);
                    }
                    document.getElementById('image-form-{$this->entityType}').reset();

                    //add sorting functionality to updated grid view
                    if(imageType != "" ) {
                        $('input[name="Images[image_type]"]').each(function() {
                            gridId = "image-grid-$this->entityType-" + $(this).val();
                            if($('#' + gridId).length) {
                                setTimeout(function() { sortGrid(gridId, '{$sortUrl}'); }, 300);
                            }
                        });
                   }
                   else {
                         setTimeout(function() { sortGrid(gridId, '{$sortUrl}'); }, 300);
                   }

                }
                else {
                    $('#imageSucc').hide();
                    $('#imageFail').html(response.message);
                    $('#imageFail').show();
                    $('#communityLoader').hide();
                }
            },
            error:function() {
                $('#communityLoader').hide();
            }

        })
    });

JS

function sortGrid(id, URL) {    
    $('#' + id + ' table.items tbody').sortable({
        forcePlaceholderSize: true,
        forceHelperSize: true,
        items: 'tr',
        update : function() {
                $('#communityLoader').css({
                    height:$('#communityLoader').parent().height(),
                    width:$('#communityLoader').parent().width()
                });
                $('#communityLoader').show();
                serial = $('#' + id + ' table.items tbody').sortable('serialize', {key: 'items[]', attribute: 'rel'});

                $.ajax({
                    type : 'POST',
                    url : URL,
                    data : serial,
                    success : function(data) {
                       $('#communityLoader').hide();
                       $.fn.yiiGridView.update(id);
                       setTimeout(function() {sortGrid(id, URL)}, 2000);
                    },
                    error : function(request, status, error) {
                        $('#communityLoader').hide();
                    }
                });
            },
        helper: fixHelper
    }).disableSelection();
}

Answer 1

Above issue is resolved by doing below changes:

ImageViewWidget:
Note : i have removed the afterAjaxUpdate.

 <?php   
 ..........................  
........................   
$this->widget('zii.widgets.grid.CGridView', array(
        'id'=>"image-grid-$this->entityType-$value",
        'ajaxUrl'=>Yii::app()->createAbsoluteUrl('bdxFeed/images',array('entityType'=>$this->entityType,'entityTypeId'=>$this->entityTypeId)),
        //'rowCssClassExpression'=>'"items[]_{$data->image_id }"',
        'rowHtmlOptionsExpression'=>'array("rel"=>"items[]_{$data->image_id}")',
        'dataProvider'=>$dataProvider,
         //'afterAjaxUpdate' => 'sortGrid',
        'htmlOptions'=> array(
            'style'=>'padding:0px',
        ),
        'columns'=>array(

        ........................
        ........................

and in js:

I have changed below :

 $.fn.yiiGridView.update(id);
 setTimeout(function() {sortGrid(id, URL)}, 2000);

with

$.fn.yiiGridView.update(gridId,{
                            complete: function(jqXHR, status) {
                                if (status=='success'){
                                    sortGrid(gridId, '{$sortUrl}');
                                }
                            }
                        });

That's it, it is resolved bu doing above changes.