Whdaterangepicker In (Tb) Cgridview

Yii 1.1 General Discussion
1

Hi,

I’m using the WhDateRangePicker extension from YiiWheels (gracias dos amigos!!), as a column Filter on a CGridView:




<?php $this->widget('bootstrap.widgets.TbGridView',array(

	'id'=>'system-events-grid',

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

	'filter'=>$model,

	'afterAjaxUpdate' => 're_attach_events',// re-install DateRangePicker

	'type' => TbHtml::GRID_TYPE_STRIPED.' '.TbHtml::GRID_TYPE_HOVER,

	'columns'=>array(

		'Message',

		array(

			'name'=>'ReceivedAt',

			'filter'=> $this->widget('yiiwheels.widgets.daterangepicker.WhDateRangePicker',array(

				'name' => 'Logs[ReceivedAt]',

				'id' => 'Logs_ReceivedAt',

				'callback' => 'js:function(){$.fn.yiiGridView.update("system-events-grid");}',

				'value' => $model->ReceivedAt,

				'pluginOptions' => array(

			        //	'opens' => 'left',

			        // ...

				),

			), TRUE),

        ),

	)

)); ?>

?>

It works great the first time the page is loaded, but it stops working after a filter is applied via AJAX.

After some reading I learnt that it is necessary to re attach this widget on ‘afterAjaxUpdate’.

So, I’m doing:




//'afterAjaxUpdate' => 're_attach_events',// re-install DateRangePicker


<?php Yii::app()->clientScript->registerScript('re-attach-datepicker-events',

	'function re_attach_events() {

		$("#Logs_ReceivedAt").daterangepicker();

	}'

);?>

The problem is that by calling daterangepicker() again from this script, the constructor is called and a new DateRange Picker <DIV> is created everytime. So, when applying filters multiple times on the same page, I end up with many DateRange Pickers <DIV>s. Only the last one created is active and in use, so the user doesn’t really see the others, but it is not correct and it might consume resources by creating indefinite <DIV>s, plus I will have to pass the initial options to this new DateRangePicker every time.

I’m looking for a way to re-attach the events to the <input> on ‘afterAjaxUpdate’, instead of calling the whole daterangepicker() function again…

Any ideas on how to to this?

daterangepicker() seems to add Event Listneres on the the <input> for click, focus, and keyup, when initialized.

I think I need to re-attach those, but I don’t know how.

2

Hi,

This is just an idea

[size=“2”]Before calling this method., just check whether div is available with id… then remove this div using (’#id’).remove()[/size]

$("#Logs_ReceivedAt").daterangepicker();




	'afterAjaxUpdate'=>'function(id, data){

		console.log($("#id").remove());

        $("#Logs_ReceivedAt").daterangepicker();

      }
3

Thanks for your input Chandran.

The <DIV> doesn’t have an ID, but it has a class, so I tried your suggestion, but by class and it worked.


console.log($(".daterangepicker").remove());

It doesn’t solve all the problems, as I still need to re-create the DateRangePicker with all its options and its callback function, but at least it will prevent the creation of unlimited <DIV>s.

Thanks a lot.