Question

我不确定我是否正在执行以下操作，但我希望我的jQuery图由按钮触发，同时不需要回发整个页面，因此包含更新面板。显然，图表加载但不知何故我认为它在回发发生之前就已经发生，因此每当我点击我的'previewgraph'按钮时，我可以看到图形动画然后再回到空白图表。请善意的建议。

感谢。

<script type="text/javascript">
            $("#<%=btnPreviewGraph.ClientID%>") .click(function () {
                alert("Here");
                jQuery(document).ready(function ($) {
                    // for each result row..
                    $(".extras_result").each(function () {
                        // get the width of the bar from the span html
                        var length = $(this).find("span").html();
                        // Animate the width of the 'p' with a callback function
                        $(this).find("p").animate({ 'width': length }, 2000, function () {
                            // once the bar animation has finished, fade in the results
                            $(this).find("span").fadeIn(300);
                        });
                    });
                });
            });
        </script>


  <asp:Button ID="btnPreviewGraph" runat="server" ClientIDMode="Static" Text="Preview"/>

             <asp:UpdatePanel ID="upnlPreviewChart" runat="server" UpdateMode="Conditional">
             <Triggers>
          <asp:AsyncPostBackTrigger ControlID="btnPreviewGraph" EventName="Click" />
             </Triggers>
          <ContentTemplate>
     <div class="row">
                    <asp:Label runat="server" ID="Label1" Text="<%$ Resources:loyaltyManagerResources, uilblCamQualAccumulatedSpending %>"
                        CssClass="label">
                    </asp:Label>
                               <br /><br />
            <table cellpadding="0" cellspacing="0" class="extras_table">
                <tr>
                    <th class="extras_y-desc" scope="row">
                        Male
                    </th>
                    <td>
                        <div class="extras_result">
                            <p class="extras_p">
                               &nbsp;<span>10%</span></p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th class="extras_y-desc" scope="row">
                        Female
                    </th>
                    <td>
                        <div class="extras_result">
                            <p class="extras_p">
                               &nbsp;<span>30%</span></p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th class="extras_y-desc" scope="row">
                        Unknown
                    </th>
                    <td>
                        <div class="extras_result">
                            <p class="extras_p">
                               &nbsp;<span>55%</span></p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="extras_x-desc">

                    </td>
                </tr>
            </table>
             </div>
         </ContentTemplate>
         </asp:UpdatePanel>

Answer 1

jQuery（文档）.ready我认为不会触发，因为这只适用于完整的回发。

    var Manager = Sys.WebForms.PageRequestManager.getInstance();
    Manager.add_endRequest(function() {
        $(".extras_result").each(function () {
            // get the width of the bar from the span html
            var length = $(this).find("span").html();
            // Animate the width of the 'p' with a callback function
            $(this).find("p").animate({ 'width': length }, 2000, function () {
                // once the bar animation has finished, fade in the results
                $(this).find("span").fadeIn(300);
            });
        });
    });

这会将相同的功能添加到管理器的结束请求事件中 - 您可以通过我认为（不确定如何）的面板ID过滤它，或者理想情况下在按钮上添加某种交换机客户端。

我没有测试过上面的代码，但它应该可以工作。

Answer 2

如果您使用此按钮仅显示图形，则可以使用preventdefault（）限制btnPreviewGraph的默认行为，如下所示

$("#btnPreviewGraph").click(function (e) {
    e.preventDefault();
    //your code continues

Answer 3

如果您使用的是updatepanel，则需要将它放在pageLoad（）函数下。

function pageLoad(sender, args)
{
   $(document).ready(function(){   

     $(".datePick").datepicker();  

     $(".collapsibleContainer").collapsiblePanel();  

   });         
}

它对我来说很好。我也在使用它。

jQuery Click事件和更新面板

3 个答案: