Question

我正在尝试实现flowplayer.org的JQuery工具提示 http://flowplayer.org/tools/demos/tooltip/form.html 进入我的webapplication（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和类直接访问输入，它将正常工作，但这意味着将它们全部输入：

$("#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不再受限制。

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

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

OR

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

AJAX vs JQuery Tooltip - UpdatePanel

2 个答案: