negar
November 27, 2014, 7:25am
1
hi
i use editable inline in gridvew :
for first time , it`s work right. but after sort gridview, ajax not working:
my view :
<?php $this->widget('zii.widgets.grid.CGridView', array(
'id'=>'project-grid',
'dataProvider'=>$model->search(),
'filter'=>$model,
'columns'=>array(
'id',
'name',
array(
'name' => 'startDate',
'value' => '$data->getShowDate($data->startDate)'
),
array(
'name' => 'endDate',
'value' => '$data->getShowDate($data->endDate)'
),
'priority',
array(
'class'=>'DataColumn',
'name' => 'progress',
'evaluateHtmlOptions'=>true,
'htmlOptions' => array('id'=>'"progress:{$data->id}"','contenteditable'=>'"true"'),
),
'progress',
array(
'class'=>'CButtonColumn',
),
),
)); ?>
<script>
$(function(){
var message_status = $("#status");
$("td[contenteditable=true]").blur(function(){
var field_id = $(this).attr("id") ;
field_id = field_id.replace('progress:','');
var value = $(this).text() ;
$.ajax({
'type' : 'Get',
'data' : 'temp='+value+'&tempId='+field_id,
'url' :'<?php echo $this->createUrl('project/editProgress')?>',
'success':function(data){
message_status.show();
message_status.text(data);
//hide the message
setTimeout(function(){message_status.hide()},3000);
$.fn.yiiGridView.update('project-grid', {data: $(this).serialize()});}
}
)
});
})
</script>
alirz23
November 27, 2014, 8:09am
2
add the event handler to the grid itself and delegate it down to the column like so
$(function(){
var message_status = $("#status");
$("#project-grid").on("blur", "td[contenteditable=true]", function(){
var field_id = $(this).attr("id") ;
field_id = field_id.replace('progress:','');
var value = $(this).text() ;
$.ajax({
'type' : 'Get',
'data' : 'temp='+value+'&tempId='+field_id,
'url' :'<?php echo $this->createUrl('project/editProgress')?>',
'success':function(data){
message_status.show();
message_status.text(data);
//hide the message
setTimeout(function(){message_status.hide()},3000);
$.fn.yiiGridView.update('project-grid', {data: $(this).serialize()});}
}
)
});
})
negar
November 27, 2014, 9:22am
3
thanks
but my problem is $.fn.yiiGridView.update.
after $.fn.yiiGridView.update , my ajax not work
negar
November 27, 2014, 9:38am
4
my problem resolved. but my way not good !!
<?php $this->widget('zii.widgets.grid.CGridView', array(
'id'=>'project-grid',
'afterAjaxUpdate'=>'fu',
'dataProvider'=>$model->search(),
'columns'=>array(
'id',
'name',
array(
'name' => 'startDate',
'value' => '$data->getShowDate($data->startDate)'
),
array(
'name' => 'endDate',
'value' => '$data->getShowDate($data->endDate)'
),
'priority',
array(
'class'=>'DataColumn',
'name' => 'progress',
'evaluateHtmlOptions'=>true,
'htmlOptions' => array('id'=>'"progress:{$data->id}"','contenteditable'=>'"true"'),
),
'progress',
array(
'class'=>'CButtonColumn',
),
),
)); ?>
<script>
function fu(){
$(function(){
//acknowledgement message
var message_status = $("#status");
$("td[contenteditable=true]").blur(function(){
var field_id = $(this).attr("id") ;
field_id = field_id.replace('progress:','');
var value = $(this).text() ;
$.ajax({
'type' : 'Get',
'data' : 'temp='+value+'&tempId='+field_id,
'url' :'<?php echo $this->createUrl('project/editProgress')?>',
'success':function(data){
message_status.show();
message_status.text(data);
//hide the message
setTimeout(function(){message_status.hide()},3000);
$.fn.yiiGridView.update('project-grid', {data: $(this).serialize()});}
}
)
});
});
alirz23
November 27, 2014, 10:34am
5
I told you what to do you what happens when you first load the page your javascript event get registered for elements on page when you load new/next page the elements are loaded into dom with no events
