使用Ajax在Gridview更新后显示工具提示。

I use yiiGridView javascript function to automatically update a gridview with contacts for every 4 seconds (using setInterval). When the mouse is over one of the "view", "edit" or "delete" buttons, there is always a tooltip that shows up (I'm using yii bootstrap extension to have a better graphic design for the tooltips). However, when the ajax request updates the gridview, the tooltip disappears and never shows again in google chrome, unless I move the mouse again. In firefox and IE, the tooltip hides but then it automatically shows up again. Is there any function I can call in order to force the tooltip that was displaying to display again if the mouse continues in the same position as before? I guess I would have to call such function in the complete function of yiiGridView right? Can anyone please help me?

我使用了yiiGridView javascript函数来自动更新每4秒有联系人的gridview(使用setInterval)。当鼠标在“视图”、“编辑”或“删除”按钮上时，总是会出现一个工具提示(我使用yii bootstrap扩展来更好地设计工具提示)。但是，当ajax请求更新gridview时，工具提示将消失，并且不会在谷歌chrome中再次显示，除非我再次移动鼠标。在firefox和IE中，工具提示会隐藏起来，但之后会自动再次出现。如果鼠标继续保持原来的位置，我可以调用什么函数来强制显示正在显示的工具提示再次显示吗?我想我必须在yiiGridView的完备函数中调用这个函数，对吧?有人能帮帮我吗?

Here is the JS code that I use to automatically update the grid view:

下面是我用来自动更新网格视图的JS代码:

setInterval(function(){
        $('#contact-grid').yiiGridView('update', {
                data: $(this).serialize(),
                complete: function(jqXHR, status) {

                }
        });
},4000)

Thank you very much.

非常感谢。

1 个解决方案

#1

You should actually use 'afterAjaxUpdate' in CGridView

您应该在CGridView中使用“afterAjaxUpdate”

/**
 * @var string a javascript function that will be invoked after a successful AJAX response is received.
 * The function signature is <code>function(id, data)</code> where 'id' refers to the ID of the grid view,
 * 'data' the received ajax response data.
 */
public $afterAjaxUpdate;

You can use it like this:

你可以这样使用:

<?php
$this->widget('zii.widgets.grid.CGridView', array(
    'id' => 'mygrid',
    'dataProvider' => $dataprovider,
    'afterAjaxUpdate' => 'function(){$(\'[data-toggle="tooltip"]\').tooltip({ html:true, trigger:\'hover\'})}', // <-- this line does the trick!
    'columns' => array(
        'name',
        'address',
        ...
    ),
));
?>

#1