Ajax Request is Not Working After CGridView Update

Question

I Want to open a CJuiModel by Clicking on CGridView CButtonColumn view Button as my CGridView and CJuiModel is as:-

     <?php
                $dataProvider = new CArrayDataProvider($model->exhibitorLocation, array(
                    'keys' => array('productId'),
                ));


                $this->widget('zii.widgets.grid.CGridView', array(
                    'dataProvider' => $dataProvider,
                    'id' => 'exhibitor-location-grid',
                    'summaryText' => false,
                    'pager' => array(
                        'class' => 'CLinkPager',
                        'header' => false,
                    ),
                    'columns' => array(
                        array(
                            'header' => 'S No.',
                            'value' => '++$row',
                        ),
                        array(
                            'header' => 'Hall No',
                            'value' => '$data->location->hallNo',
                        ),
                        array(
                            'header' => 'Stand No',
                            'value' => '$data->standNo',
                        ),
                        array(
                            'class' => 'CButtonColumn',
                            'header' => 'Manage',
                            'template' => '{view}{delete}',
                            'buttons' => array(
                                'view' => array(
                                    'imageUrl' => $this->module->assetsUrl . "/images/info_icon.png",
                                    'options' => array('class' => 'exb-location'),
                                    'url' => 'Yii::app()->createUrl("admin/venuemap/viewExbLocation", array("exbLocId"=>$data->primaryKey))',
                                ),
                                'delete' => array(
                                    'imageUrl' => $this->module->assetsUrl . "/images/delete_icon.png",
                                    'url' => 'Yii::app()->createUrl("admin/venuemap/deleteExbLocation", array("exbLocId"=>$data->primaryKey))',
                                ),
                            ),
                            'htmlOptions' => array(
                                'style' => 'width:100px;float:center'
                            )
                        ),
                    ),
                    'rowCssClassExpression' => '($row%2 ? "visit2" : "visit1")',
                    'itemsCssClass' => 'visitor_list',
                    'htmlOptions' => array(
                    )
                ));
                ?>
                <div class="name_field">Hall No<span>*</span></div>
                <?php echo CHtml::dropDownList('hall-no', '', CHtml::listData(Venuemap::model()->findAll(), 'locationId', 'hallNo'), array('class' => 'name_input2', 'id' => 'hall-no')); ?>

                <div class="name_field">Stand No</div>
    <?php echo CHtml::textField('Stand No', '', array('class' => 'name_input', 'id' => 'stand-no')); ?> 

                <?php
                echo CHtml::ajaxLink("Add Location", Yii::app()->createUrl('admin/venuemap/addExbLocation'), array(
                    'type' => 'post',
                    'data' => array(
                        'exhibitorId' => $model->exhibitorId,
                        'standNo' => 'js: $("#stand-no").val()',
                        'locationId' => 'js: $("#hall-no").val()'
                    ),
                    'success' => 'function(html){  $.fn.yiiGridView.update("exhibitor-location-grid"); }'
                        ), array('class' => 'search_btn'));
                ?>

                 <?php
                    $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
                        'id' => 'location-dialog',
                        'options' => array(
                            'title' => 'View Location',
                            'autoOpen' => false,
                            'modal' => true,
                            'width' => 'auto',
                            'height' => 'auto',
                            'resizable' => false
                        ),
                    ));
                    $this->endWidget();
                    ?>

    <?php 

    Yii::app()->clientScript->registerScript('view-location-ajax', "


    $('.exb-location').click(function(){
       url=$(this).attr('href');
       $.ajax({
       type: 'post',
       url: url,
       success: function(result){
            $('#location-dialog').html(result).dialog('open');
            $('#draggable').draggable(); 
            return false;
        }
    });
       return false;
    });


    ");
    ?>

View Button is working fine and open a CJuiModel on click but when I add a new Location in CGridView . On Clicking on view button my CJuiModel is not opening and page is redirecting to Url.Why my jquery is getting failed on updating CGridView. Help..

you have to check the type of data sending like post or get may be this is the conflict . — Gaurav Parashar, Jun 09 '15 at 11:35
make one of it get type out of both may be this resolve the conflict — Gaurav Parashar, Jun 09 '15 at 11:51
Maybe changing ajax call using jquery 'on' instead direct event binding. Html Elements are destroyed and regenerated after refresh cgridview and need to be referenced with jquery 'on' events — Alejandro Quiroz, Jun 10 '15 at 06:53
@Alejandro thanks . .on('click','.exb-location',function(){}) works — Double H, Jun 15 '15 at 06:46
@user278149 nice! I will answer your question detailing it. With this you can close question — Alejandro Quiroz, Jun 16 '15 at 01:54

score 0 · Answer 1 · edited May 23 '17 at 12:22

Change ajax call using JQuery 'on' instead direct event binding:

This:

...

$('.exb-location').click(function(){
...

Change for:

...

$('.exb-location').on('click', '.exb-location', function(){
...

Html Elements are destroyed and regenerated after CGridview refresh. Direct JQuery events only work with existing elements before DOM load. When they are removed, or new elements are added later, direct events don't work.

Ajax Request is Not Working After CGridView Update

1 Answers1