Async postback not working

Question

I'm using this gauge in my contentplaceholder.

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

MyControl.ascx:

<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>

<div id="<%=this.ClientID%>_ctl" class="jgauge" ></div>

<script type="text/javascript">
    $(document).ready(function () {
    var isPostBack = <%= Page.IsPostBack ? "true" : "false" %>;
        if(isPostBack == "true")
        {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            prm.add_endRequest(onEndRequest);
        }
        else{
                var <%=this.ClientID%>_ctl;

                <%=this.ClientID%>_ctl = new jGauge(); 
                <%=this.ClientID%>_ctl.id = '<%=this.ClientID%>_ctl';
                <%=this.ClientID%>_ctl.init(); 
 }
    });

    function EndRequestHandler(sender, args){  
        var <%=this.ClientID%>_ctl;
        <%=this.ClientID%>_ctl = new jGauge(); 
        <%=this.ClientID%>_ctl.id = '<%=this.ClientID%>_ctl';
        <%=this.ClientID%>_ctl.init();
}
</script>

In MyPage.aspx: (Contains dynamically created table having several such controls. putting the generated table on placeholder)

<asp:UpdatePanel ID="up1" runat="server">
    <ContentTemplate>
        <asp:PlaceHolder id="phMain" runat="server" />
    </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. Please Help. Trying to solve it since couple of days.

I noticed in firebug that only outer div that holds the gauge is present on the page. Inner contents of the gauge are not rendered. — mike44, Oct 23 '12 at 07:08

score 2 · Accepted Answer · edited May 23 '17 at 10:24

2

I was able to solve this with by going:

$(document).ready(function () { 
    Sys.WebForms.PageRequestManager.getInstance()
        .add_endRequest(<%=this.ClientID%>_ctlEndRequestHandler); 
    var <%=this.ClientID%>_ctl; 

    <%=this.ClientID%>_ctl = new jGauge();  
    <%=this.ClientID%>_ctl.id = '<%=this.ClientID%>_ctl'; 
    <%=this.ClientID%>_ctl.init();
});

function <%=this.ClientID%>_ctlEndRequestHandler(sender, args){
    var <%=this.ClientID%>_ctl; 
    <%=this.ClientID%>_ctl = new jGauge();  
    <%=this.ClientID%>_ctl.id = '<%=this.ClientID%>_ctl'; 
    <%=this.ClientID%>_ctl.init(); 
}

The only real difference is that the postback checks are no longer taking place. Your underlying problem is that $(document).ready will not fire on partial postbacks, which means that isPostBack is never actually getting set to true. Because of this, Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); was never executing, meaning that your EndRequestHandler never ran.

Edit

The other issue is that naming the method EndRequestHandler is guaranteed to cause problems if you have more than one of the control at the same time. To get around this, I appended <%=this.ClientID%>_ctl to the name of EndRequestHandler to ensure it was unique.

More info:

How do I use a jQuery $(document).ready and an ASP.NET UpdatePanel together?

http://encosia.com/document-ready-and-pageload-are-not-the-same/

edited May 23 '17 at 10:24

Community

1
1

answered Oct 23 '12 at 06:37

nick_w

14,758
3
51
71

Should I keep EndRequestHandler function as it is? – mike44 Oct 23 '12 at 07:02
Sorry, yes, that should stay the same. Will edit my answer to update. – nick_w Oct 23 '12 at 07:03
Thank you for your help. I tried that. But I noticed in firebug that only outer div that holds the gauge is present on the page. Inner contents of the gauge are not rendered. – mike44 Oct 23 '12 at 07:12
What do you mean by inner contents? – nick_w Oct 23 '12 at 07:28
Like it has canvas, needle, & so on. It is rendered as:
only. – mike44 Oct 23 '12 at 07:33
Did you use View Source to check this out? I just tried the IE9 and FF dev tools and could see the various divs that got rendered. – nick_w Oct 23 '12 at 07:39
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/18449/discussion-between-mike44-and-nickw) – mike44 Oct 23 '12 at 07:42
Not sure why, but the call to `add_endRequest` may need to be moved outside of `document.ready` in order to work, as shown [in this answer](https://stackoverflow.com/a/256253). – OfirD Mar 13 '23 at 18:38

Async postback not working

1 Answers1

Linked