Home > DeveloperSection > Forums > jQuery Click event and update panel
Tanuj Kumar

Total Post:134

Points:940
Posted on    August-22-2014 12:57 AM

 C# C# 
Ratings:


 1 Reply(s)
 591  View(s)
Rate this:

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>



Sumit Kesarwani

Total Post:378

Points:2694
Posted on    August-22-2014 1:54 AM

Hi Tanuj, 

You need to put the it under pageLoad() function if you are using updatepanel.

function pageLoad(sender, args)

{

   $(document).ready(function(){  

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

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

   });        

}


Don't want to miss updates? Please click the below button!

Follow MindStick