AJAX vs JQuery Tooltip - UpdatePanel

Question

I'm trying to implement flowplayer.org's JQuery tooltip http://flowplayer.org/tools/demos/tooltip/form.html into my webapplication (C#.NET).

I have the following script at 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();
            }
        }

That will control this input and several other more:

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

I have a GridView and DetailsView under an UpdatePanel, after the first partialPostBack, the tooltip will only work with the inputs within that UpdatePanel, and after the next partialPostBacks none will work whatsoever.

If I change from:

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

to:

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

Only the input's outside the UpdatePanel will work

If I access directly the input by it's id and class, it will work properly, but that would mean typing them all in:

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

Any thoughts on how to make all of them bind properly ? thanks in advance

Answer 1

Sounds like your JavaScript is no longer bound when the update panel is refreshed.

You'll need to execute one of the following code snippets when your Update Panel posts back in order to re-bind the 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);

Answer 2

Managed to solve it with a simple workaround, created a second function for the tooltip creation to affect only the input field inside the 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();
    }

I still don't understand why it didn't work before...