javascript - Yii "results per page"ajax 下拉列表在同一页面加载其他 ajax 内容后中断

Question

我在 Yii 中有一个 View ，“Patients” View ，它有许多 CGridViews 和其他元素，它们在加载初始 View 后通过 ajax 加载。有些是在已经加载了 ajax 的 div 中加载的 ajax，这意味着它们嵌套了 2 层深。

在这些加载了 ajax 的 CGridView 中，我有下拉菜单，让用户可以设置每个网格中每页的结果数。这工作正常，直到用户使用 ajax 在页面上加载另一个元素。在 ajax 加载另一个网格(或其他任何东西)之后，它会破坏每页 ajax 函数的所有其他结果，除了刚刚加载的那个。

在使用 ajax 加载任何其他内容后，其他 CGridView 在使用我的每页结果下拉列表时将抛出此 javascript 错误:

类型错误:设置未定义

内置的 CGridView 寻呼机总是适用于所有网格，所以我知道必须有一些方法让我的每个页面选择器的结果找到正确的 $.fn.yiiGridView 来更新。

内联加载 cgridview 的 Controller 操作:

public function actionInlineSearch()
{
   YiiSessions::model()->setFromRequestCookie();

    $model=new GeneExpressionCufflinksGene('search');
    $model->unsetAttributes();  // clear any default values 
    // page size drop down changed

    if (isset($_GET['gecgPageSize'])) {
        Yii::app()->user->setState('gecgPageSize',(int)$_GET['gecgPageSize']);
        unset($_GET['gecgPageSize']);  // would interfere with pager and repetitive page size change
    }
    $gecgPageSize=Yii::app()->user->getState('gecgPageSize');

    if(isset($_REQUEST['GeneExpressionCufflinksGene']))
        $model->attributes=$_REQUEST['GeneExpressionCufflinksGene'];

    $this->renderPartial('inlineSearch',array('model'=>$model,'gecgPageSize'=>$gecgPageSize), false, true);
}

加载 CGridView 小部件的 inlineSearch View :

 // $columns[]='normal_allele_depth';
// $columns[]='normal_allele_freq';

echo "<div class='results-selector'>";
echo "Results per page: ". 
    CHtml::dropDownList('gecgPageSize',$gecgPageSize,array(10=>10,20=>20,50=>50,100=>100),array(
        'onchange'=>"
            $.fn.yiiGridView.update('gecg',{ data:{gecgPageSize: $(this).val() }});
        ",
    ));
echo "</div>";

$this->widget('zii.widgets.grid.CGridView', array(
   'id'=>'gecg',
   'filter'=>$model,
   'dataProvider'=>$dataProvider, 
   'columns'=>$columns,
));
?>

想法？

Answer 1

我不确定我是否理解了您所写的所有内容，但您是否确信双深度寻呼机加载了 CGridView 的工作？

Yii 将事件处理程序附加到寻呼机按钮、排序按钮、CButtonColumn 按钮。使用 jQuery 的类 .on()方法。如果您指定 selector 参数，那么将为 jQuery 元素的所有匹配后代触发事件 on() 方法被调用，对于存在和不存在的时刻这个电话。

Yii 将处理程序附加到页面上始终存在(并且必须存在才能触发事件)的 document 元素。您可以在 zii/widgets/assets/gridview/jquery.yiigridview.js 中的 CGridView 的 init 方法中将其视为示例:

settings.updateSelector = settings.updateSelector
    .replace('{page}', pagerSelector)
    .replace('{sort}', sortSelector);

gridSettings[id] = settings;

if (settings.ajaxUpdate.length > 0) {
    $(document).on('click.yiiGridView', settings.updateSelector, function () {
        // Check to see if History.js is enabled for our Browser
        if (settings.enableHistory && window.History.enabled) {
            // ...
        } else {
            $('#' + id).yiiGridView('update', {url: $(this).attr('href')});
        }
        return false;
    });
}

所以我想如果你在 ajax 请求上呈现 CGridView 小部件，那么寻呼机、排序等的所有事件处理程序都将附加到部分呈现的 ajax 页面的 document 元素但是而不是新加载元素所属的主页之一。如果您通过 ajax 加载您的 inlineSearch View ，您的下拉列表可能会发生同样的事情。

这就是为什么，正如我所见，所有事件处理程序都必须附加到最初加载页面的主要非 ajax View 的 document 元素。