jQuery Click event and update panel
<p>I am not sure if I am doing the following right but 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. </p>

<p>Thanks.</p>

<pre><code>&lt;script type="text/javascript"&gt;
            $("#&lt;%=btnPreviewGraph.ClientID%&gt;") .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);
                        });
                    });
                });
            });
        &lt;/script&gt;


  &lt;asp:Button ID="btnPreviewGraph" runat="server" ClientIDMode="Static" Text="Preview"/&gt;

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

                    &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
             &lt;/div&gt;
         &lt;/ContentTemplate&gt;
         &lt;/asp:UpdatePanel&gt;
</code></pre>
