---
title: "jQuery Click event and update panel"  
description: "jQuery Click event and update panel"  
author: "Anonymous User"  
published: 2014-08-22  
updated: 2014-08-22  
canonical: https://www.mindstick.com/forum/2079/jquery-click-event-and-update-panel  
category: "c#"  
tags: ["c#"]  
reading_time: 2 minutes  

---

# jQuery Click event and update panel

I want my jQuery graph to be triggered by a [button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net) and at the same time not needing to [postback](https://www.mindstick.com/blog/342/postback-in-asp-dot-net) the entire [page](https://www.mindstick.com/articles/13031/why-to-make-a-wikipedia-page) therefore the [update panel](https://www.mindstick.com/forum/418/is-it-possible-to-use-fileupload-control-within-the-update-panel) was included.

Apparently, the graph loads but somehow I think it did before the postback occured therefore everytime when I [click](https://www.mindstick.com/articles/12423/social-login-magento-2-one-click-to-register-social) on my 'previewgraph' button, I can see the graph animates then goes back to a blank [chart](https://www.mindstick.com/articles/1509/show-google-analytics-data-in-chart-in-asp-dot-net-mvc) 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>
```

## Replies

### Reply by Sumit Kesarwani

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

});

}


---

Original Source: https://www.mindstick.com/forum/2079/jquery-click-event-and-update-panel

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.