douchang8219 2013-10-21 12:00
浏览 194
已采纳

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

I'm having an error with gridview update, sorting, paging. The grid is loaded fine via AJAX upon page load. But upon clicking the thead to sort the row, or upon clicking any of the pagination button I get an error saying:

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

and in Firebug I'm getting:

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

[Break On This Error]

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

This is pointing to this piece of code:

    /*<![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();
}});
/*]]>*/

I tried to solve the problem by including bootstrap.tooltip.js and bootstrap.popover.js additionally but I'm still getting the same error.

Here is the part where all the scripts are included:

<!-- 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>

Here is the controller that is rendering the view:

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 ),
    ));

}

}

and here is the 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'


    ),
));
?>

and here is 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>

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

Last of all Here is the 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();

});

I just don't know what to do to fix the error. And I need to use gridview badly, in my case... Please provide any help on how to fix the error.

Thanks,

Maxx

  • 写回答

1条回答 默认 最新

  • douquqiang1513 2013-10-21 18:35
    关注

    I'm not sure why error occurs, but reinitializing popovers after ajax request is... clumsy. Try to init popover with event delegations, so popovers will work also on dynamically added DOM.

    Here is some example of initializing popover with delegation:

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

    With this kind of initialization afterAjaxUpdate is no longer nessesary.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?