Cannot execute javascript for timer control inside UpdatePanel

Question

I have a timer control inside an update panel, and the timer should execute some javascript.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

    <asp:UpdatePanel ID="ImagePanel" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
        </Triggers>
        <ContentTemplate>
            <asp:Timer ID="Timer1" runat="server" OnTick="SlideImages" Interval="4000"></asp:Timer>
            <div id="slideshow" runat="server">
                <div runat="server" id="currentImageDiv" class="current">
                    <img id="currentImage" src="" runat="server" class="slideImage current" />
                    <asp:Label  runat="server" id="currentImageCaption" CssClass="caption"></asp:Label>
                </div>
                <div runat="server" id="nextImageDiv" class="next">
                    <img id="nextImage" src="" runat="server" class="slideImage next" />
                    <asp:Label runat="server" id="nextImageCaption" CssClass="caption"></asp:Label>
                </div>
            </div>
            <asp:HiddenField runat="server" ID="slideIndexField" Value="1"/>
        </ContentTemplate>
    </asp:UpdatePanel>    

Code behind:

protected void SlideImages(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(
            Timer1,
            Timer1.GetType(),
            "SlideImages",
            @"<script src='Scripts/jquery-1.10.1.min.js' type='text/javascript'></script>
            <script type='text/javascript'>
                alert('script executed');
            </script>",
            true);
}

But it does not seem to work, what do I have to change?

Answer 1

Ouch, the mistake was the last parameter of RegisterStartupScript: it must be set to false because I have already included script tags.

Answer 2

You can add handler to Sys.WebForms.PageRequestManager.instance. End Request event

and directly call your client side function

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(endRequestHandler);

function endRequestHandler(){
 alert('script executed');
}

Answer 3

I use the following javascript code for count down timer display inside UpdatePanel..., and it works.

<script>
  function startTimer() {
    var xMinutes = 10 * 1, 
        duration = xMinutes;
    var timer = duration, minutes, seconds;
    setInterval(function () {
      minutes = parseInt(timer / 60, 10);
      seconds = parseInt(timer % 60, 10);

      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      //[not working]
      // display.textContent = minutes + ":" + seconds;

      //[working]
      document.getElementById("xtime1").innerHTML = minutes + ":" + seconds;
      if (--timer < 0) {
        timer = duration;
        gotomain();
      }
    }, 1000);
  }
</script>