带有 UpdatePanel 的 JQuery 工具工具提示答案

【问题标题】：JQuery Tools Tooltip With UpdatePanel带有 UpdatePanel 的 JQuery 工具工具提示
【发布时间】：2009-09-04 18:39:57
【问题描述】：

我的问题与在带有在 asp.net UpdatePanel 控件中刷新的工具提示的项目上使用 JQuery 工具工具提示插件 (http://flowplayer.org/tools/tooltip.html) 有关。问题是，在添加工具提示后，来自 UpdatePanel 的任何部分回发都会导致工具提示在任何已更新的 UpdatePanel 中停止工作。在部分回发之前，工具提示效果很好。下面是我如何向页面上的图像（和其他控件）添加工具提示的示例。为简单起见，省略了一些代码：

<script type="text/javascript">
//--call this to add tooltips to any element with a class of "tooltipHandle"
function createTooltip(){

    // select all desired input fields and attach tooltips to them
    $(".tooltipHandle").tooltip({
    // place tooltip on the right edge
    position: ['center', 'right'],
    // a little tweaking of the position
    offset: [-2, 10],

    // use a simple show/hide effect
    effect: 'toggle',

    // custom opacity setting
    opacity: 0.7
    });

}

//--add tooltips after every postback (including partial AJAX postbacks)
function pageLoad(sender, args) {
    createTooltip(); 
}
</script>

<html>
<!-- assume this UpdatePanel is updated from the code behind--!>
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="upPanelPrivateMediaList">
    <ContentTemplate>
    <img class="tooltipHandle" src="/images/questionMark.gif"/>
    <div class="tooltip">SOME GREAT TOOLTIP CONTENT</div>

    </ContentTemplate>
</asp:UpdatePanel>   

</html>

非常有趣的一点是，如果我在第一次加载页面时不调用“createToolTip()”，那么部分回发会正确地将工具提示添加到我的图像中，并且在我进行第二次回发之前它将一直有效。这意味着，如果工具提示已经存在，部分回发只会处理工具提示。在部分回发后手动调用 createToolTip() 不会使工具提示再次工作。

如果您有任何想法或需要澄清，请告诉我。提前致谢！！

【问题讨论】：

标签： .net asp.net javascript jquery

【解决方案1】：

您可以将此代码粘贴到正文部分：

<script>
$(document).ready(function () {
     $("#demo a[title]").tooltip();
});
</script>

将以下代码粘贴到 .cs 文件中：

protected void Page_Load(object sender, EventArgs e)
{
    string javaScriptFunction =
         "$(document).ready(function () {" +
              "$('#demo a[title]').tooltip()" +
         "});";
    Page.ClientScript.RegisterStartupScript(typeof(Page), "ajaxTrigger", "Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);", true);
    Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "EndRequest", "function EndRequestHandler(sender, args){" + javaScriptFunction + "}", true);
}

【讨论】：

【解决方案2】：

正如jakejgordon 所说，缓存元素将不起作用，因为在部分更新后，它们不再是相同的元素了。

您是否考虑过使用事件委托模型？每次有部分更新时，您都不需要保留绑定事件。这是一篇有趣的文章 - http://www.learningjquery.com/2009/12/simple-tooltip-for-huge-number-of-elements

【讨论】：

我正在清理我打开的一些旧问题，我相信使用 .live() 是正确的答案（知道我现在所知道的）。结束问题！

【解决方案3】：

我最终不得不更改工具提示 .js 文件 (tools.tooltip-1.1.0.js)，如下所示：

// jQuery plugin implementation
$.prototype.tooltip = function(conf) {

// return existing instance
var api = this.eq(typeof conf == 'number' ? conf : 0).data("tooltip");
//-- Caching up the api does not work with .NET AJAX postbacks.
//if (api) { return api; }

长话短说，它在设置工具提示的后续代码之前返回，因为它没有意识到元素已被更新面板刷新。虽然我们可能会因此而受到轻微的性能影响，但它确实解决了目前的问题。

【讨论】：

【解决方案4】：

你应该把 CausesValidator 的 TextBox 或 ... Updatepanel 上的 False 改为 True，就这样吧。

<asp:TextBox ID="TextBox4" runat="server" ToolTip="tooltip" " AutoPostBack="True" CausesValidation="True"></asp:TextBox>

【讨论】：