Monday, October 27, 2008

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.

5 comments:

Julian said...

Lifesaver! Spent last half hour trying to get an updatePanel inside a modal popup to reload asynchronously. First few lines of your blog gave me the answer.

Anonymous said...

I need to update the parent page Label control from Iframe page. i need to do this without Reloading the Parent page. How to do this with update panel or Ajax. plz help on this. . ,

eTimeOff said...

Hi,

I keep getting an error that says input string is in wrong format. It seems to happen when updating the second update panel. Do you have any ideas?

thanks for you help,

tom

Sara's said...

Hi Vince,

I have similar requirement where after page load i have to Get data from XMLs and display in three different update panels one by one Async.Appreciate, please help me to do this task. Here is my ID sara.ajay01@gmail.com

Anonymous said...

Great article. Thanks!