php - Yii Gridview 错误类型错误 : Jquery(. ..).popover 不是函数 [打破此错误] Jquery ('[Data-Toggle=Popover]' ).popover();

Question

我在 gridview 更新、排序、分页方面遇到错误。页面加载时，网格通过 AJAX 正常加载。但是，在单击标题对行进行排序或单击任何分页按钮时，我收到一条错误消息:

    Uncaught TypeError: Object [object Object] has no method 'popover'
jQuery.yiiGridView.afterAjaxUpdate
$.extend.success
fire
self.fireWith
done
callback

在 Firebug 中我得到:

TypeError: jQuery(...).popover is not a function

[中断此错误]

jQuery('[data-toggle=popover]').popover();

This 指向这段代码:

    /*<![CDATA[*/
jQuery('#yw0').yiiGridView({'ajaxUpdate':['yw0'],'ajaxVar':'ajax','pagerClass':'pagination','loadingClass':'grid-view-loading','filterClass':'filters','tableClass':'tablehead table table-paper table-condensed table-striped table-sortable table','selectableRows':1,'enableHistory':false,'updateSelector':'{page}, {sort}','filterSelector':'{filter}','pageVar':'RealTime_page','afterAjaxUpdate':function() {
jQuery('.popover').remove();
jQuery('[data-toggle=popover]').popover();
jQuery('.tooltip').remove();
jQuery('[data-toggle=tooltip]').tooltip();
}});
/*]]>*/

我尝试通过另外包含 bootstrap.tooltip.js 和 bootstrap.popover.js 来解决问题，但我仍然遇到相同的错误。

这是包含所有脚本的部分:

<!-- start: JavaScript-->

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery-1.10.2.js"></script>
    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery-migrate-1.0.0.min.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/bootstrap.min.js"></script>
    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/bootstrap-tooltip.js"></script>
    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/bootstrap-popover.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery-ui-1.10.0.custom.min.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.ui.touch-punch.js"></script>



    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.cookie.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/fullcalendar.min.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.dataTables.min.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/excanvas.js"></script>
    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.flot.min.js"></script>
    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.flot.pie.min.js"></script>
    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.flot.stack.js"></script>
    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.flot.resize.min.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.chosen.min.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.uniform.min.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.cleditor.min.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.noty.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.elfinder.min.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.raty.min.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.iphone.toggle.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.uploadify-3.1.min.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.gritter.min.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.imagesloaded.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.masonry.min.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.knob.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/jquery.sparkline.min.js"></script>

    <script src="<?php echo Yii::app()->theme->baseUrl;?>/js/custom.js"></script>

    <script src="<?php echo Yii::app()->assetManager->baseUrl; ?>/28e7347b/jquery.ba-bbq.js"></script>
    <script src="<?php echo Yii::app()->assetManager->baseUrl; ?>/28e7347b/jquery.ajaxqueue.js"></script>
    <script src="<?php echo Yii::app()->assetManager->baseUrl; ?>/dd5f9a70/gridview/jquery.yiigridview.js"></script>




</body>

这是渲染 View 的 Controller :

public function actionUpdateProductData() {
Yii::import('application.components.DataScraper.*');
require_once('GetProductData.php');

$productRealTime = RealTime::model()->findAll();

if (isset($_GET['RealTime'])) {
        $productRealTime->attributes = $_GET['RealTime'];
    }

if (count($productRealTime->model()->findAll()) === 0) {

    $symbolData = new GetProductData();
    $symbolData->getAmazonProductData();
} else {


    echo CJSON::encode( array(
        'status' => 'OK',
        'div' => $this->renderPartial('_productDataGrid', array(
                        'model' => $productRealTime), 
                        true, true ),
    ));

}

}

这是 View _productDataGrid.php:

  <?php

$this->widget('bootstrap.widgets.TbGridView', array(
    'id' => 'real-time-grid',
    'dataProvider' => $model->search(),
    'filter' => $model,
    'columns' => array(
        'id',
        'name',
        'category',
        'price'
        'rating'


    ),
));
?>

这里是index.php:

<div>
<hr>
<ul class="breadcrumb">
    <li>
        <a href="#">Home</a> <span class="divider">/</span>
    </li>
    <li>
        <a href="#">Stock Info</a>
    </li>
</ul>
<hr>

基本网址； $cs = Yii::app()->getClientScript(); $cs->registerScriptFile($baseUrl . '/js/ajaxProductDataUpdate.js', CClientScript::POS_END);?>

最后这里是 ajaxProductDataUpdate.js

    var productParameters = {
    ajaxUpdate: function() {
        $.ajax({
            url: "/ProductAnalysis/index.php/realTime/updateProductData",
            type: "GET",
            dataType:"json",
            error: function(xhr, tStatus, e) {
                if (!xhr) {
                    alert(" We have an error ");
                    alert(tStatus + "   " + e.message);
                } else {
                    alert("else: " + e.message); // the great unknown
                }
            },
            success: function(data) {
                $.fn.yiiGridView.update('real-time-grid', {
                    data: $(this).serialize()
                });
            }
        });
    }
};

$(document).ready(function() {
    productParameters.ajaxUpdate();

});

我只是不知道如何修复该错误。就我而言，我需要严重使用 gridview...请提供有关如何修复错误的任何帮助。

谢谢

麦克斯

Answer 1

我不确定为什么会发生错误，但在 ajax 请求后重新初始化弹出窗口是......笨拙的。尝试使用事件委托(delegate)来初始化弹出窗口，这样弹出窗口也可以在动态添加的 DOM 上运行。

以下是使用委托(delegate)初始化弹出窗口的一些示例:

jQuery('body').popover(
    {'selector':'[rel=popover]'}
);

通过这种初始化，afterAjaxUpdate 不再是必需的。