How can we update the UpdatePanel on Client?

When you do postback via the control which is the trigger-control of UpdatePanel, the content of UpdatePanel will be updated asynchronously. We can also call Update1.Update() to refresh the content within UpdatePanel. But how to update the UpdatePanel on client?

Fortunately, we can call Sys.WebForms.PageRequestManager.getInstance()._doPostBack('UpdatePanel1_UniqueID','UpdatePanel1_UniqueID') to achieve updating UpdatePanel1 on client.



Now, please see this codes:

function pageLoad(objSender, args) {
Sys.WebForms.PageRequestManager.getInstance()._doPostBack('UpdatePanel1', 'UpdatePanel1');
Sys.WebForms.PageRequestManager.getInstance()._doPostBack('UpdatePanel2', 'UpdatePanel2');
Sys.WebForms.PageRequestManager.getInstance()._doPostBack('UpdatePanel3', 'UpdatePanel3');
}

Does it will update all these UpdatePanel controls on client?

No. Actually, the new request will cancel the old request if the old request is not finished. So in this scenario, only UpdatePanel3 will be updated. How to update these three UpdatePanel controls?

JavaScript is for single-thread. It have to call another one when the previous is done. So we can post the new request when the old one is finished.

<script type="text/javascript">
var IsSpecific=false;
var updatepanelid;
function doupdate()
{
IsSpecific=true;
CurrectUpdatePanelId=0;
updatepanels_id=['<%=UpdatePanel1.UniqueID%>','<%=UpdatePanel2.UniqueID%>','<%=UpdatePanel3.UniqueID%>'];
doNext();
}

function doNext()
{
Sys.WebForms.PageRequestManager.getInstance()._doPostBack(updatepanels_id[CurrectUpdatePanelId], updatepanels_id[CurrectUpdatePanelId]);
CurrectUpdatePanelId++;

if(CurrectUpdatePanelId>=updatepanels_id.length)
IsSpecific=false;
}

</script>
<div>
<script type="text/javascript">

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
function(sender, e)
{
if(IsSpecific)
{
doNext();
}
});

</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%=DateTime.Now %>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%=DateTime.Now %>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%=DateTime.Now %>
</ContentTemplate>
</asp:UpdatePanel>
<input id="Button1" type="button" value="button" onclick="doupdate()" />
</div>

Now the three UpdatePanel controls will be updated one by one.