My main problem is, you cannot run ajaxed js code without eval().
I modified CListView’s html code, so rows could be updated, deleted and more rows could be added. (used inputs + ajaxbuttons) After each deletion or addition I updated the content of the list. I managed to give each button an unique id this way:
<?php echo CHtml::ajaxButton('Save',
array('attributeValue/update', 'id' => $data->id),
array(
'success' => "js: function(data, textStatus, XMLHttpRequest) { $.fn.yiiListView.update('list'); }",
'type' => 'post',
),
array('name' => 'tl'.CHtml::$count)
); ?>
<?php CHtml::$count++; ?>
When I updated the content it didn’t interfere with the selectors from the main code.
If you include the main script again in the widget, you could get errors, like I did with loading jquery again. (CListWidget’s JS crashed), you have to manually include the files:
Yii::app()->getClientScript()->registerCoreScript('bbq');
I modified zaccaria’s code, so the scripts could be placed where they belong and this way js script can be surrounded by onload & ondomready events. (JQuery undefined error!)
public function renderOnRequest()
{
$html='';
foreach($this->scriptFiles as $scriptFiles)
{
foreach($scriptFiles as $scriptFile)
$html.=CHtml::scriptFile($scriptFile)."\n";
}
$scripts=isset($this->scripts[self::POS_END]) ? $this->scripts[self::POS_END] : array();
foreach($this->scripts as $k=>$script) {
if ($k == self::POS_READY) {
$scripts[] = "jQuery(function($) {\n".implode("\n",$script)."\n});";
}
elseif($k == self::POS_LOAD) {
$scripts[] ="jQuery(window).load(function() {\n".implode("\n",$script)."\n});";
}
}
if (!empty($scripts)) $html .= CHtml::script(implode("\n",$scripts))."\n";
if($html!=='')
return $html;
}
The problem was, that when I updated list content the <script> tags were removed via the jquery functions. You cannot add/modifiy <script> tags via JQuery, only hardcoded style. You have to get it as a string and eval() it.
So, after refresh you would have to "reassign" JQuery delegates, because the ids could have been modified, assigned to other objects:
jQuery('body').delegate('#tl0','click',function(){jQuery.ajax({'success': function(data, textStatus, XMLHttpRequest) { $.fn.yiiListView.update('tulajdonsag-lista'); },'type':'post','url':'/yii-gsmhome/admin/attributeValue/update/id/2','cache':false,'data':jQuery(this).parents("form").serialize()});return false;});
jQuery('body').delegate('#tl1','click',function(){jQuery.ajax({'success': function(data, textStatus, XMLHttpRequest) { $.fn.yiiListView.update('tulajdonsag-lista'); },'type':'post','url':'/yii-gsmhome/admin/attributeValue/delete/id/2','cache':false,'data':jQuery(this).parents("form").serialize()});return false;});
I could try to examine the right <script> tag’s content and eval it, so it always becomes updated.
By the way the same kind of thing happens if you have custom buttons in CGridView. When you paginate through ajax, and change page, you have to reassign the events attached to the "new" buttons loaded via ajax. Otherwise it doesnt work.
Any thoughts of this?