Cgridview Keyup Re-Drawing Whole Table, Causes Focus Change

Yii 1.1 General Discussion
1

Hey guys,

Sorry I’ve been asking so many questions. I’m using the CGridView widget. I’ve set up filters, and I’ve set up an onKeyUp jquery function to update the table when a user types into a filter element. I’ve also set up the view to return only the table element on an ajax request, instead of the whole page.

The problem is, once the user types into the element and the delay passes, the whole table is redrawn. The focus is taken away from the input element. How can I get the cursor to remain in the input field after the table as updated with new, filtered information? Or a better question, how can I get the table to only update the rows, instead of the whole element - table headers and all?

I’m using the onkeyup suggestion from here:

Yii forum

I have attached seemingly relevant pieces:


Yii::app()->clientScript->registerScript('search', "

function refreshList() {

   $.fn.yiiGridView.update('" . $grid_id . "', {

       data: $('tr.filters input').serialize()

   });

}

var timeoutHandle;

$('#content').on('keyup', 'tr.filters input', function() {

    clearTimeout(timeoutHandle);

    timeoutHandle = setTimeout(function() {refreshList()}, 300);

});

"

);

And the partial view:


<?php 

$this->widget('zii.widgets.grid.CGridView', array(

        'id' => $grid_id,

	'dataProvider'=>$model->search(),

        'columns' => array(

            array(

                'class' => 'CButtonColumn',

                'template' => '{view} {update} {delete} {view_classes} {add_class}',

                'viewButtonUrl' => 'Yii::app()->controller->createUrl("view", array("id" => $data->id))',

                'updateButtonUrl'=> 'Yii::app()->controller->createUrl("update", array("id" => $data->id))',

                'deleteButtonUrl'=> 'Yii::app()->controller->createUrl("delete", array("id" => $data->id))',

                    'buttons' => array(

                        'add_class' => array(

                            'label' => 'Add Class',

                            'url' => 'Yii::app()->createUrl("registeredClass/create", array("student_id" => $data->id))',

                        ),                        

                        'view_classes' => array(

                            'label' => 'View Classes',

                            'url' => 'Yii::app()->createUrl("registeredClass/view", array("student_id" => $data->id))',

                        )

                    )

            ),

            'first_name',

            'last_name',


        ),

        'filter' => $model,

            

));
2

You can reset the focus as




Yii::app()->clientScript->registerScript('search', "

function refreshList(focused) {

   $.fn.yiiGridView.update('" . $grid_id . "', {

       data: $('tr.filters input').serialize()

   });

   $(focused).focus();

}

var timeoutHandle;

$('#content').on('keyup', 'tr.filters input', function() {

    var focused = $(':focus');

    clearTimeout(timeoutHandle);

    timeoutHandle = setTimeout(function(focused) {refreshList(focused)}, 300);

});

"

);
3

Unfortunately, this does not work. $(’:focus’) creates a DOM pointer to the current input element. Since the whole table is redrawn, this DOM element no longer exists. Going off your idea, I tried using an identifier which would remain:


function refreshList(focused) {

    $.fn.yiiGridView.update('" . $grid_id . "', {

        data: $('tr.filters input').serialize()

    });

    var element = 'input[name=\"' + focused + '\"]';

    $(element).focus();

}

var timeoutHandle;

$('#content').on('keyup', 'tr.filters input', function() {

    var focused = $(this).attr('name');

    clearTimeout(timeoutHandle);

    timeoutHandle = setTimeout(function() {refreshList(focused)}, 300);

});

This does not work either. However, if I take the output of the ‘element’ var, and manually type it in to $().focus (such that I end up with $(‘input[name=\“Student[first_name]\”]’).focus() ), it will focus. BUT, it focuses to the beginning of the element, rather than where it left off.

I’m assuming there is not a way for CGridView to only return table rows or at best, a JSON response?

4

can you share snap of the output for better idea?

5

i think you may use this change function

.

for e.g…


<?php $gridId = 'wines-grid'; ?>



function updateGridAuto(val)

{

	var inputSelector = "#<?php echo $gridId?> .filters input, #<?php echo $gridId?> .filters select";

	$.fn.yiiGridView.update('<?php echo $gridId?>', {

        data:  $(inputSelector).serialize()

    });

}



$(document).ready(function(){

	$('#Wines_username_auto').change(function() {

		var val = $("#Wines_username").val($('#Wines_username_auto').val());

		updateGridAuto(val);

	});

});