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">
<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">
<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">
<span>55%</span></p>
</div>
</td>
</tr>
<tr>
<td>
</td>
<td class="extras_x-desc">
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Sumit Kesarwani
22-Aug-2014You need to put the it under pageLoad() function if you are using updatepanel.
function pageLoad(sender, args)
{
$(document).ready(function(){
$(".datePick").datepicker();
$(".collapsibleContainer").collapsiblePanel();
});
}