开发者

It seems JQuery and AjaxToolkit doesn't work together

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>
               开发者_Go百科                         </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 ?


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>


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜