Question

I have 2 update panels, both update panels are set to UpdateMode=”Conditional”.

The first update panel contains:

• 2 AJAX toolkit SliderExtender
• 2 Corresponding Text Boxes

The first update panel has the 2 SliderExtender textbox’s TextChanged events set as async post back triggers.

<Triggers>
    <asp:AsyncPostBackTrigger ControlID="tb_Slider1" EventName="TextChanged" />
    <asp:AsyncPostBackTrigger ControlID="tb_Slider2" EventName="TextChanged" />
</Triggers>

The second update panel contains:

• 3 Labels
• Timer with an interval of 1 second

The second update panel loads the text in the labels via code behind. The second update panel has the Timer’s Tick event set as the async post back trigger.

<Triggers>
     <asp:AsyncPostBackTrigger ControlID="tm_Timer1" EventName="Tick" />
</Triggers>

If I am scrolling either of the sliders in the first update panel, as the timer in the second update panel ticks; the slider drops itself and in turn causes the TextChanged event to fire.

Why is the partial post back in the second update panel causing the first update panel controls to react?

I have been brushing up on Update Panels and it seems the partial post backs are more like full post backs in that they run all the server page life-cycle events. I am not sure if this is causing the slider to malfunction?

Is there anyway to avoid this? or is it “Working as intended”?

Ultimately I would like to be able to move the sliders freely even if the timer is ticking. This way the timer update panel with be frequently updated, and the first update panel will be updated when the user drops the slider control (ie TextChanged).

Answer 1

Inspite of the fact that tm_Timer1 doesn’t added to first updatepanel’s triggers collection, when it ticks, values for all form’s controls submitted to server including textboxes values and first UpdatePanel also refreshes. You can add script below right after ScriptManager control to fix this issue:

<script type="text/javascript">
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);

     var realDoPostback = __doPostBack;
     __doPostBack = function (sender, args) {
          if (sender === "<%= tm_Timer1.UniqueID %>") {
               $get("<%= tb_Slider1.ClientID  %>").removeAttribute("name");
               $get("<%= tb_Slider2.ClientID  %>").removeAttribute("name");
          }
          realDoPostback(sender, args);
     }

     function endRequestHandler(sender, args) {
          $get("<%= tb_Slider1.ClientID  %>").setAttribute("name", "<%= tb_Slider1.UniqueID %>");
          $get("<%= tb_Slider2.ClientID  %>").setAttribute("name", "<%= tb_Slider2.UniqueID %>");
     }
</script>