JQuery Function doesn't work while the ticker Updating the panel

Question

Why the JQuery function doesn't work while the ticker Updating the panel? Please see the code below.

<asp:Timer ID="Schedule_Timer" runat="server" Interval="10000"></asp:Timer>    
<asp:UpdatePanel ID="Schedule_UpdatePanel" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Schedule_Timer" EventName="Tick" />
    </Triggers>
    <ContentTemplate>
        <asp:Panel ID="Schedule_Panel" runat="server" Height="250px"  Width="250px">
            <asp:Literal ID="Schedule_Label" runat="server" Text=""></asp:Literal>
        </asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>

<script>
    $('#test').cycle({
        fx: 'scrollUp',
        timeout: 6000,
        delay: -2000
    });
</script>

The Schedule_Label is filled in via code-behind:

Protected Sub Schedule_Timer_Tick(sender As Object, e As System.EventArgs) Handles Schedule_Timer.Tick
    PrintTheSchedule()
End Sub

Private Sub PrintTheSchedule()
    //This is just for example, the actual data is taken from gridview based on the realtime
    Schedule_Label.Text = "<div id='test'>" & _
                "<div>test 1</div>" & _
                "<div>test 2</div>" & _
                "<div>test 3</div>" & _
                "<div>"        
End Sub

For the first 10 seconds, the JQuery do cycling the test div. But after the UpdatePanel refreshed, then the JQuery doesn't running anymore and it caused all of the test div value showed up on the page. How to fix this problem? Thank you very much.

Answer 1

There is a preety simple answer.

The jquery function executed on the page load itself only. So when the Timer tick the jquery function does not remain valid again.

So what you need to do is:

In the PrintTheSchedule function call the javascript function again like

IN C# i do this like

ScriptManager.RegisterClientScriptBlock(Page, typeof(Page), "runScript", "RunScriptAgain();", true);

And in the Aspx Page do

<script>

 function RunScriptAgain() 
 {
  $('#test').cycle({
    fx: 'scrollUp',
    timeout: 6000,
    delay: -2000
   });
 }

// Required for the first time

$(document).ready(function() {  RunScriptAgain(); })