AJAX 与 JQuery 工具提示 - UpdatePanel

Question

我正在尝试实现 flowplayer.org 的 JQuery 工具提示 http://flowplayer.org/tools/demos/tooltip/form.html 进入我的网络应用程序（C#.NET）。

我在 Master.Page 有以下脚本：

           function createTooltip() {



            // select all desired input fields and attach tooltips to them
            $("#aspnetForm :input").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: 'fade',

                // custom opacity setting
                opacity: 0.7
            });        
}

        //--add tooltips after every postback (including partial AJAX postbacks)

        function pageLoad(sender, args) {
            if (args.get_isPartialLoad()) {
                createTooltip();
            }
        }

这将控制这个输入和其他几个：

<asp:TextBox ID="txtEscola" runat="server" Text="" class="tooltipHandle" title="Observações adicionais que sejam prudentes introduzir" MaxLength="100" </asp:TextBox>

我在 UpdatePanel 下有一个 GridView 和 DetailsView，在第一个 partialPostBack 之后，工具提示将仅适用于该 UpdatePanel 中的输入，而在下一个 partialPostBacks 之后，任何情况都不会起作用。

如果我改变：

        function pageLoad(sender, args) {
            if (args.get_isPartialLoad()) {
                createTooltip();
            }
        }

到：

        function pageLoad(sender, args) {
            createTooltip();
    }

只有在 UpdatePanel 之外的输入才会起作用

如果我通过它的 id 和 class 直接访问输入，它将正常工作，但这意味着将它们全部输入：

$("#ctl00_ContentPlaceHolder1_DetailsView1_txtEscola.tooltipHandle").tooltip({

关于如何使所有这些都正确绑定的任何想法？ 提前致谢

Answer 1

设法通过一个简单的解决方法解决了这个问题，为工具提示创建创建了第二个函数，以仅影响 detailsview/updatepanel 中的输入字段：

        function createTooltipOutside() {
        $('.tooltipHandleOutside').tooltip({
            position: ['center', 'right'],
            offset: [-2, 10],
            effect: 'fade',
            opacity: 0.7
        });
    }
    function createTooltipInside() {
        //--call this to add tooltips to any element with a class of "tooltipHandleInside"
        $('.tooltipHandleInside').tooltip({
            position: ['center', 'right'],
            offset: [-2, 10],
            effect: 'fade',
            opacity: 0.7
        });

    }

    //--add tooltips after every postback (including partial AJAX postbacks)

    function pageLoad(sender, args) {
        if (args.get_isPartialLoad()) {
            createTooltipInside();
        }
        createTooltipOutside();
    }

我仍然不明白为什么它以前不起作用......

Answer 2

刷新更新面板时，您的 JavaScript 似乎不再绑定。

当您的更新面板回发时，您需要执行以下代码之一 sn-ps 以重新绑定 JavaScript。

ClientScriptManager cs = Page.ClientScript;
cs.RegisterStartupScript(typeof(Page), "ReApplyJavascript", "<script type=text/JavaScript>createTooltip();</script>", false);

或

ScriptManager.RegisterStartupScript(Page, typeof(Page), "ReApplyJavascript", "<script type=text/JavaScript>createTooltip();</script>", false);