Question

我的问题与在具有在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（）不会使工具提示再次起作用。

如果您有任何想法或需要澄清，请告诉我。在此先感谢!!

Answer 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);
}

Answer 2

我最终必须更改工具提示.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; }

长话短说，它在后续代码之前返回，后者将设置工具提示，因为它没有意识到更新面板已刷新元素。虽然我们可能会从中获得很小的性能影响，但它现在确实解决了这个问题。

Answer 3

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

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

Answer 4

你应该改变TextBox的 CausesValidator 或者......在Updatepanel上从 False改为True ，只是它。

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

使用UpdatePanel的JQuery Tools工具提示

4 个答案: