It seems JQuery and AjaxToolkit doesn't work together

Question

I have created a nice tooltip box using JQuery and I used some plugin which are works very well in all browser. but the problem is started when I put my component in an update-panel I explain this by show some code :

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                            <ContentTemplate>
                                <asp:UpdateProgress ID="UpdateProgress0" runat="server">
                                    <ProgressTemplate>
                                        <div style="width: 100%;">
                                            <p>
                                                Please Wait, It is loading...
                                            </p>
                                        </div>
                                    </ProgressTemplate>
                                </asp:UpdateProgress>
                                <table class="style1">
                                    <tr>
                                        <td align="center">
                                            <asp:Button ID="btnUpBestSale" runat="server" OnClick="btnUpBestSale_Click" Text="▲" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div id="demo">
                                                <uc6:GroupLoader ID="GroupLoader1" runat="server" GroupCode="37" ItemCount="5" ItemCountSkipness="0"
                                                    RepeatedColumns="1" TypeID="Vertical" />
                                            </div>
                                            <script>
                                                $("#demo img[title]").tooltip({ offset: [30, 25] });
                                            </script>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <asp:Button ID="btnDownBestSale" runat="server" OnClick="btnDownBestSale_Click" Text="▼" />
                                        </td>
                                    </tr>
                                </table>
                            </ContentTemplate>
                        </asp:UpdatePanel>

The Update panel is necessary when I click on the button and on row data-bind event that is inside my grouploader component.

it work at the first time but after clicking on the button that is inside the update panel jquery event never rise again.

How I can solve this ?

look this site I used this one: flowplayer.org/tools/tooltip/index.html — kamiar3001
– kamiar3001, Commented Aug 21, 2011 at 6:45
As soon as you use update panels you'll find you have all manner of problems. We're so much better off for dropping update panels and the awful ACT. YMMV — Bernhard Hofmann
– Bernhard Hofmann, Commented Aug 21, 2011 at 7:39
yes I agree with you but don't you accept this is very easy to use ? — kamiar3001
– kamiar3001, Commented Aug 21, 2011 at 9:24

Tae-Sung Shin · Accepted Answer · 2011-08-21 06:52:03Z

Try this code instead. It will make sure that the script will be executed after everything in UpdatePanel is updated. (Reference: http://msdn.microsoft.com/en-us/library/bb383810.aspx)

<script>
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      prm.add_endRequest(function() {
          $("#demo img[title]").tooltip({ offset: [30, 25] });
      });
</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                            <ContentTemplate>
                                <asp:UpdateProgress ID="UpdateProgress0" runat="server">
                                    <ProgressTemplate>
                                        <div style="width: 100%;">
                                            <p>
                                                Please Wait, It is loading...
                                            </p>
                                        </div>
                                    </ProgressTemplate>
                                </asp:UpdateProgress>
                                <table class="style1">
                                    <tr>
                                        <td align="center">
                                            <asp:Button ID="btnUpBestSale" runat="server" OnClick="btnUpBestSale_Click" Text="▲" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div id="demo">
                                                <uc6:GroupLoader ID="GroupLoader1" runat="server" GroupCode="37" ItemCount="5" ItemCountSkipness="0"
                                                    RepeatedColumns="1" TypeID="Vertical" />
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <asp:Button ID="btnDownBestSale" runat="server" OnClick="btnDownBestSale_Click" Text="▼" />
                                        </td>
                                    </tr>
                                </table>
                            </ContentTemplate>
                        </asp:UpdatePanel>

This worked for me, but I also had to increase the z-index on the tooltip to get it to show over my modelpopup...

Neelam · Accepted Answer · 2011-08-23 07:07:33Z

0

jquery wont work after async postback from update panel.so you will have to use endrequesthandler, Here's how to do it. http://codethatworkedforme.blogspot.com/2011/08/having-issues-with-update-panel.html

answered Aug 23, 2011 at 7:07

Neelam

1,07812 silver badges26 bronze badges

Collectives™ on Stack Overflow

It seems JQuery and AjaxToolkit doesn't work together

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related