Select2: how to make xhr calls on init - ajax

Question

I do some ajax calls for onChange event in Select2. But i need to do similar calls when Select2 is initialized/opened.
How to do it?
$this->widget('ext.select2.ESelect2', array(
'model'=> $model,
'attribute'=> 'PaymentType',//'open'=>'js:{alert("init");}',
'data' => CHtml::listData(PaymentMethod::model()->findall(), 'id','name'),
'htmlOptions'=>array(
//'onInit'=>'js:{alert("init");}', // this does not work!!
'onChange'=>CHtml::ajax(array('type'=>'GET',
'url'=>$this->createUrl('user/cashlessUser', array ('id'=>Yii::app()->user->id)),
'data'=>'js:{PaymentMethod: this.value }',
'success'=>"js:function(data){ alert(data); }",
)),
),
'options'=> array('allowClear'=>true,
'width' => '250',
'placeholder' => '',
),
));
Update
I've found the eSelect2 specification on events here
But it works for pure js, while i need to do it for Yii plugin, where events (except onChange) are not properly fired:
'htmlOptions'=>array(
'select2-opening'=> 'js: console.log("smth"); ',
'select2-opening'=> ' console.log("smth"); ',
'select2-opening'=> ' alert("smth"); ',
's2id_Events_PaymentType.open'=> 'js: console.log("open"); ',
'onFocus'=> 'js: console.log("smth"); ',
'onOpen'=> 'js: console.log("smth"); ',
s2id_Events_PaymentType is an id of this particular eSelect.
All these are not fired, though issue no errors.
Update 2
I've tried to bind logic thru script but with no avail:
Yii::app()->clientScript->registerScript('some-script', "
jQuery('#s2id_Events_PaymentType').on('select2-open', function(e) { console.log('open'); });
");

Answer 1

You should have a look at select2 events in the docs.
I would use these two events:
change - for the AJAX events needed to execute after change
$el.on("change", function (e) {
$.ajax({...});
});
id - Since there is no select2 create or init event we need to override some of the public properties available to us, for example "id" and place our AJAX requests in it.
$el.select2({
id: function (e) {
// execute AJAX calls on init
$.ajax({...});
return e == undefined ? null : e.id;
}
});
And here is an example fiddle: http://jsfiddle.net/dn43uv4c/