updating second updatepanel using checkbox in first updatepanel

Question

I have two UpdatePanels. One UpdatePanel has a CheckBox and a UserControl. UserControl has some TextBoxes. In other updatepanel, there are few Labels.

I have added javascript function to checkbox to hide/show it. I am using Javascript to avoid partial postbacks to server.

I also want to update the second UpdatePanel when checkbox is checked/unchecked or some data is changes in user control's textboxes.

Can I call javascript function as well as server side function on same checkbox ? I tried adding triggers to second updatepanel but they are not fired.

updatepanel1
  checkbox 
  usercontrol
    textbox1
    texbox2

updatepanel2
   label1 (updated on change of textbox 1)
   label2 (updated on change of textbox 1)

my checkbox markupd looks like this

 <asp:CheckBox ID="chkShippingSameAsBilling" runat="server" 
     Text="  Ship to same address"
     AutoPostBack="true" Checked="true" 
     onclick="return ShowShippingAddress();" 
 />

Don't know about updating from javascript, but have you tried `updatepanel1.Update()` on server side ?? — yogi, Jun 22 '12 at 07:09
@DotnetSparrow: So you want to show/hide UpdatePanel2 on CheckBox checked/uncheck(this does `ShowShippingAddress`) and you want to update the Labels when TextBox' Text changed? I yet don't understand why you need the serverside function. — Tim Schmelter, Jun 22 '12 at 07:19
yes I tried. Actually one when I hookup client function, server function is not called. — DotnetSparrow, Jun 22 '12 at 07:20

score 1 · Answer 1 · answered Jun 22 '12 at 07:19

You can add a dummy button on the page. Set async postback trigger for the second panel on the button.

<asp:AsyncPostBackTrigger ControlID="btnAsync" EventName="Click" />

In the check changed of the check box, in javascript call function

btnAsync.Click();

It will postback the second update panel asynchronously. You can call server side functions from second panel postback or by adding server side click event to dummy button.

score 0 · Answer 2 · answered Jun 22 '12 at 07:19

Put a hidden button in your second updatePanel:

<div style="display:none">
   <asp:Button ID="YourButton" runat="server" />
</div>

Then click in using your onclick function:

function ShowShippingAddress() 
{
     document.getElementById('<%# YourButton.ClientID %>').click()
}

That should cause the second to postback and update.

score 0 · Answer 3 · edited May 23 '17 at 11:56

You will need to set up a trigger in the second panel to use the event from the checkbox, there are some examples here.

http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers

Trigger an update of the UpdatePanel by a control that is in different ContentPlaceHolder

Also, take a look at knockout.js or jquery for some more elegant solutions...

http://knockoutjs.com/

updating second updatepanel using checkbox in first updatepanel

3 Answers3