Yii Gridview Error Typeerror: Jquery(...).popover Is Not A Function [Break On This Error] Jquery('[Data-Toggle=Popover]').popover();

Hi, i’m having an error with gridview update, sorting, paging. The grid is loaded 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>

</html>






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>

</div>





<div class="span-10">

    

    <div id="section2" >

        

    </div>

    

</div>







<?php

        /*

         * Include the ajax Stock update script

         * 

         */

        $baseUrl = Yii::app()->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

Hi

Problem may be here…

Please remove the true,true and try once…

your problem seems like … ur page have not got required JS…

check once all required js got loaded before page loading.

If its not loaded try with external loading on same file…where you are using widget

[color=#000000]$this[/color][color=#666600]->[/color][color=#000000]renderPartial[/color][color=#666600]([/color][color=#008800]’_productDataGrid’[/color][color=#666600],[/color][color=#000000] array[/color][color=#666600]([/color][color=#000000]

                        [/color][color=#008800]'model'[/color][color=#000000] [/color][color=#666600]=&gt;[/color][color=#000000] &#036;productRealTime[/color][color=#666600]),[/color][color=#000000] 


                        [/color][color=#000088]true[/color][color=#666600],[/color][color=#000000] [/color][color=#000088]true[/color][color=#000000] [/color][color=#666600]),[/color][color=#000000]


    [/color][color=#666600]));[/color]

Hi thanks for the reply. Yes the renderPartial() works now. The js files was loaded fine but as you mentioned it was a problem with renderpartial being called before the necessary files were loaded.