Question

I have 3 buttons within update panel. Each of them using qTip plugin. Outside of the Update Panel it works correct but inside it doesn’t dissappeared after the click.

Here is my code

function pageLoad() {


            $('.subindex a[title]').qtip({
                position: {
                    corner: {
                        target: 'topMiddle',
                        tooltip: 'bottomMiddle'
                    }
                },
                style: {
                    name: 'cream',
                    padding: '7px 13px',
                    color: '#350608',
                    width: {
                        max: 210,
                        min: 0
                    },
                    tip: true
                }
            });
}

and update panel

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>

      <a title="Title">
        <asp:ImageButton ID="ImgOne" OnCommand="ImgOne_Click" runat="server"  /></a>
                   <a title="Title2">
        <asp:ImageButton ID="ImgTwo" OnCommand="ImgTwo_Click" runat="server"  /></a>
<a title="Title2">
        <asp:ImageButton ID="ImgThree" OnCommand="ImgThree_Click" runat="server"  /></a>    
                    </ContentTemplate>
                </asp:UpdatePanel>

any idea how to fix it?

Answer 1

When an UpdatePanel updates it trashes the markup within and re-renders it, so you need re-wire your jquery events to the new markup. You can try using live or delegate, or you can just run your pageLoad function again after the panel has updated. There is a jquery plugin that can help you do this or you can use some of the MS javascript to do it yourself like so

$(function() {
    pageLoad(); //initial call for your first page load
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function () {
        pageLoad(); //this will be called when an UpdatePanel.Update() occurs
    });
});

Of course in my opinion, getting off webforms and into asp.net mvc would be an even better solution.

p.s. make sure you are using UpdateMode=”Conditional” on your UpdatePanels otherwise you are wasting your time to begin with.

p.p.s this is a newer version of that plugin i think