JQUERY CLICK EVENT AND UPDATE PANEL

Tanuj Kumar

Total Post:134

Points:940
Posted by  Tanuj Kumar
C# 
C#
 867  View(s)
Ratings:
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>

  1. Sumit Kesarwani

    Post:378

    Points:2694
    Re: jQuery Click event and update panel

    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(); 

       });        

    }

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!