Question

I’m using this gauge in my contentplaceholder.

http://www.dariancabot.com/projects/jgauge_wip/

Script:

<link rel="stylesheet" href="Scripts/jgauge.css" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.8.0.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jgauge-0.3.0.a3.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jQueryRotate.2.2.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/excanvas.min.js"></script>
<script type="text/javascript">
    var demoGauge1 = new jGauge(); // Create a new jGauge.
    demoGauge1.id = 'jGaugeDemo1'; // Link the new jGauge to the placeholder DIV.
    $(document).ready(function () {
        demoGauge1.init(); // Put the jGauge on the page by initializing it.
    });
</script>

Markup:

<asp:UpdatePanel ID="up1" runat="server">
    <ContentTemplate>
        <div id="jGaugeDemo1" class="jgauge"></div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="myBtn" />
    </Triggers>
</asp:UpdatePanel>
<asp:Button ID="myBtn" runat="server" Text="Refresh" /> 

I have script manager on master page:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>

But after async postback (hitting ‘myBtn’), gauge disappears. Help.

Answer 1

Since html elements insice the update panel are recreated on every async postback, you’ll need to regenerate the gauge on every request.

I don’t have experience with that gauge control but something like this could do the trick

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(onEndRequest);

function onEndRequest(sender, args){    
   demoGauge1.init();       
}