Yii - jQuery not working after renderPartial

Question

I know this question has been asked numerous number of times, both here and in the Yii site, but I am not getting the solution even after going through each solution. I am sure I am doing something fundamentally wrong. So if you are still reading this - here goes nothing,

I have a page that has a CheckBoxList widget being loaded. It has a change() jQuery function call which refreshes a CGridView which works perfectly well. I also have a span related to each of the items in the checkBoxList which have a click event.

This click event, in turn calls a controller which "partially renders" a view -

Yii::app()->clientscript->scriptMap['jquery.js'] = false;


$this->widget('ext.xxx.EModelWidget', array(
'name' => $widget_name,
'manufacturer_id' => $manufacturer_id,
    )
);

And the corresponding widget code prints a CheckBoxList after fetching $data from the db.

echo CHtml::checkBoxList($this->name, array(), $data, array(
        'class' => 'modelFilter',
        'separator' => '',
        'template' => '<div>{input} {label}</div>',
        'id' => 'dummyID',
    ));

As you can see, I have put the class name for each element that will be rendered as a checkbox to be modelFilter

Now I have a script in the main view file to just display an alert box when the checkBox of class modelFilter is clicked.

Yii::app()->clientScript->registerScript('model-selected', "
$('input.modelFilter').change(function(){
  alert('Hellpo!');
  });
");

But unfortunately, this never happens.

The two common solutions which I have read in all the forums is

a) Yii::app()->clientscript->scriptMap['jquery.js'] = false; which you can see that I have duly followed.

b) $result and $processOutput parameters of the renderPartial to be false and true respectively., which is also something that I have followed.

So my question is what should I do to just get the change function on a content that is loaded via Ajax working, in Yii!!

Solution 1

If I understand correctly, you are calling $('input.modelFilter').change() before you load the list of checkboxes. Used like that the event handler will not be bound to any elements inserted after the call.

You have to use delegated events instead of directly bound events. Take a look at: http://api.jquery.com/on/ (search for "Direct and delegated events")

$("body_or_input_container").on("change", "input.modelFilter", function(e){
    //callback
});

Solution 2

I had a similar issue, after I performed an Ajax call which returned a partial rendered HTML with javascript inside (auto generated by Yii's CActiveForm) everything was broken because no jQuery plugin has been recognized anymore.

After a long research I found that the partial is sending the jQuery lib again and it reinitializes itself by "forgetting" everything what has been initialized before (especially other plugins, in my case the UI dialog). The only fix was to tell Yii to not include the jQuery.js itself in the partial but let include other JS files.

So put this at the beginning of the partial.

Yii::app()->clientscript->scriptMap['jquery.js'] = false;

Note that you must configure to load the jQuery once at the page load.