forum

Home / DeveloperSection / Forums / jQuery Click event and update panel

jQuery Click event and update panel

Anonymous User 1673 22-Aug-2014

I want my jQuery graph to be triggered by a button and at the same time not needing to postback the entire page therefore the update panel was included. 

Apparently, the graph loads but somehow I think it did before the postback occured therefore everytime when I click on my 'previewgraph' button, I can see the graph animates then goes back to a blank chart again.

 Please kindly advice.

Thanks.

<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>


Updated on 22-Aug-2014
I am a content writter !

Can you answer this question?


Answer

1 Answers

Liked By