Yii Framework Forum: ajax not work after sort in gridview - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

ajax not work after sort in gridview Rate Topic: -----

#1 User is offline   n-r 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 266
  • Joined: 19-April 13
  • Location:iran

Posted 27 November 2014 - 02:25 AM

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>


0

#2 User is offline   alirz23 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,149
  • Joined: 08-August 12
  • Location:Durban, South Africa

Posted 27 November 2014 - 03:09 AM

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()});}
        }
       
    )
    });
})

0

#3 User is offline   n-r 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 266
  • Joined: 19-April 13
  • Location:iran

Posted 27 November 2014 - 04:22 AM

thanks
but my problem is $.fn.yiiGridView.update.
after $.fn.yiiGridView.update , my ajax not work
0

#4 User is offline   n-r 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 266
  • Joined: 19-April 13
  • Location:iran

Posted 27 November 2014 - 04:38 AM

my problem resolved. but my way not good !!
:unsure:
<?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()});}
        }
       
    )
    });
    
  

});

0

#5 User is offline   alirz23 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,149
  • Joined: 08-August 12
  • Location:Durban, South Africa

Posted 27 November 2014 - 05:34 AM

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
1

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users