我正在处理一个基于AJAX请求(无重载)的项目。在我们更新cgridview之前,Jquery sortable运行良好,之后它就不工作了。
此外,如果我多次排序,它就会停止工作。这个页面有很多图片列表。
我有一个代码如下:|
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();
}
通过以下更改解决了上述问题:
ImageViewWidget:
注意:我已经删除了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(
........................
........................
和js:
我更改了以下内容:
$.fn.yiiGridView.update(id);
setTimeout(function() {sortGrid(id, URL)}, 2000);
带有
$.fn.yiiGridView.update(gridId,{
complete: function(jqXHR, status) {
if (status=='success'){
sortGrid(gridId, '{$sortUrl}');
}
}
});
就是这样,它是通过做上述改变来解决的。