Whenever either AJAX timer fires, JQuery re-runs

I have 2 sections on a page, Left Section and Right Section.

Left Section is in a conditional update panel and is reliant on Timer1.

Right Section is in a conditional update panel and is reliant on Timer 2.

The Right Section has a JQuery picture cycle. The JQuery picture cycle is refreshed even if Timer 1 fires, i think this is because the JQuery code is not relative to the update panel and gets registered outside of the update panel (even if the physical code is within the update panel).

I am trying to have the Right Section update at a different frequency than the Left Section, however the Left Section is refreshing the right section via JQuery.

Here is the supporting code:

<div style="float:left; width:965px; height:1080px; background:White url(App_Themes/TheNest/images/TV/Daily-Specials.jpg) no-repeat 0 0; overflow:hidden;"> 
        <!-- Daily Specials --> 
        <div style="margin-left:25px; margin-top:295px; margin-bottom:10px; margin-right:10px;"> 
        <span style="float:right; color:White; font-size:45px;"><%=clsNaitsa.GetMonth(dTodaysDate.Month)%> <%=dTodaysDate.Day%>, <%=dTodaysDate.Year%></span> 
        <div style="clear:both; margin-bottom:100px;"></div> 
            <div style="overflow:hidden; height:685px;"> 
                <div id="Specials"> 
                <asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">   
                 开发者_StackOverflow   <ContentTemplate> 
                    <asp:Timer runat="server" id="Timer1" Interval="10000" OnTick="Timer1_Tick"></asp:Timer> 
                    <asp:Label ID="Label1" runat="server" Text="No Refresh Yet"></asp:Label> 
                    <ul class="DailySpecials">   
                        <asp:PlaceHolder ID="ph_Specials" runat="server"></asp:PlaceHolder> 
                    </ul>                         
                    </ContentTemplate> 
                </asp:UpdatePanel> 
                </div> 
            </div> 
        </div> 
    </div> 
    <div style="float:left; width:955px; height:1080px; overflow:hidden;"> 
    <asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Conditional">   
        <ContentTemplate> 
        <asp:Timer runat="server" id="Timer2" Interval="25000" OnTick="Timer2_Tick"></asp:Timer> 
        <asp:Label ID="Label2" runat="server" Text="No Refresh Yet"></asp:Label> 
        <div class="pics"> 
                <img src="App_Themes/TheNest/images/TV/Pirate-tv-ad.jpg" alt="Pirate Boat Party" /> 
                <img src="App_Themes/TheNest/images/TV/Elections-tv-ad.jpg" alt="Senate and Student Services Elections" /> 
                <img src="App_Themes/TheNest/images/TV/Top-Model-TV-ad.jpg" alt="NAITSA's Next Top Model" /> 
                <img src="App_Themes/TheNest/images/TV/Sponsor-Thank-You.jpg" alt="Sponsors Thank-You" /> 
        </div> 
            <script type="text/javascript" language="javascript">  
            //WILL RUN DURING ASYNC POST-BACKS 
            function pageLoad() { 
                $('.pics').unbind(); 
                $('.pics').cycle({ 
                    fx: 'fade', 
                    timeout: 5000, 
                    speed: 1000 
                }); 
            }     

        // WILL RUN ONCE DURING INITIALIZATION - ASYNC POST-BACKS WILL NOT RUN AGAIN AND CYCLE BREAKS 
        //      $(document).ready(function() { 
        //          $('.pics').cycle({ 
        //          fx: 'fade', 
        //          timeout: 5000, 
        //          speed: 1000 
        //          }); 
        //      }); 
            </script>        
        </ContentTemplate> 
    </asp:UpdatePanel> 
    </div> 

 //CODE BEHIND
  protected void Page_Load(object sender, EventArgs e) 
{         
    ScriptManager1.RegisterAsyncPostBackControl(Timer1); 
    ScriptManager1.RegisterAsyncPostBackControl(Timer2); 

    dTodaysDate = DateTime.Now; 
    if(!Page.IsPostBack) 
        LoadSpecials(); 
}  

protected void Timer1_Tick(object sender, EventArgs e) 
{ 
    UpdatePanel1.Update(); 
    Label1.Text = DateTime.Now.ToString(); 
    LoadSpecials(); 
} 

protected void Timer2_Tick(object sender, EventArgs e) 
{        
    UpdatePanel2.Update(); 
    Label2.Text = DateTime.Now.ToString();        
}

You can detect when an async postback is happening via this:

function pageLoad(sender, e) { 
  if (!e.get_isPartialLoad()) {
     //Do one time task
  }
}

However, to determine which update panel updated might be interesting from the client-side. It may be possible to determine that, then call the cycle plugin. Alternatively, you could put the plugin code in a separate method:

function cycle() {
   $('.pics').unbind(); 
                $('.pics').cycle({ 
                    fx: 'fade', 
                    timeout: 5000, 
                    speed: 1000 
                }); 
}

And try calling it from the server:

ScriptManager.RegisterStartupScript(.., "cycle();");

When the appropriate timer fires.

Thanks for the reply. I do not really understand the e.get_isPartialLoad() because i do not know how to check for asp.net update panel events that have fired from JavaScript as i do not use a whole lot of JavaScript (trying to learn more java).

However i understand your second answer, which is brilliant. Rather than having my JQuery Cycle in the pageLoad() or Document.Ready(), having it in its own function solves all my problems :). Now that the Cycle is not in a page specific function i can call or re-initialize it whenever i want and it doesnt continually get called during partial post-backs.

Here is my modified code with the solution i used, now the Right Section will only restart the JQuery when Timer2 fires:

    <script type="text/javascript" language="javascript">    
function cycle() {
    $('.pics').unbind();
    $('.pics').cycle({
        fx: 'fade',
        timeout: 5000,
        speed: 1000
    });
}         
</script>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="width:1920px; height:1080px; overflow:hidden;">  
    <div style="float:left; width:965px; height:1080px; background:White url(App_Themes/TheNest/images/TV/Daily-Specials.jpg) no-repeat 0 0; overflow:hidden;">
        <!-- Daily Specials -->
        <div style="margin-left:25px; margin-top:295px; margin-bottom:10px; margin-right:10px;">
        <span style="float:right; color:White; font-size:45px;"><%=clsNaitsa.GetMonth(dTodaysDate.Month)%> <%=dTodaysDate.Day%>, <%=dTodaysDate.Year%></span>
        <div style="clear:both; margin-bottom:100px;"></div>
            <div style="overflow:hidden; height:685px;">
                <div id="Specials">
                <asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">  
                    <ContentTemplate>
                    <asp:Timer runat="server" id="Timer1" Interval="5000" OnTick="Timer1_Tick"></asp:Timer>
                    <asp:Label ID="Label1" runat="server" Text="No Refresh Yet"></asp:Label>
                    <ul class="DailySpecials">  
                        <asp:PlaceHolder ID="ph_Specials" runat="server"></asp:PlaceHolder>
                    </ul>                        
                    </ContentTemplate>
                </asp:UpdatePanel>
                </div>
            </div>
        </div>
    </div>
    <div style="float:left; width:955px; height:1080px; overflow:hidden;">
    <asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Conditional">  
        <ContentTemplate>
        <asp:Timer runat="server" id="Timer2" Interval="15000" OnTick="Timer2_Tick"></asp:Timer>
        <asp:Label ID="Label2" runat="server" Text="No Refresh Yet"></asp:Label>
        <div class="pics">
                <img src="App_Themes/TheNest/images/TV/Pirate-tv-ad.jpg" alt="Pirate Boat Party" />
                <img src="App_Themes/TheNest/images/TV/Elections-tv-ad.jpg" alt="Senate and Student Services Elections" />
                <img src="App_Themes/TheNest/images/TV/Top-Model-TV-ad.jpg" alt="NAITSA's Next Top Model" />
                <img src="App_Themes/TheNest/images/TV/Sponsor-Thank-You.jpg" alt="Sponsors Thank-You" />
        </div> 
        </ContentTemplate>
    </asp:UpdatePanel>
    </div>
</div>

 protected void Page_Load(object sender, EventArgs e)
{        
    ScriptManager1.RegisterAsyncPostBackControl(Timer1);
    ScriptManager1.RegisterAsyncPostBackControl(Timer2);

    dTodaysDate = DateTime.Now;
    if (!Page.IsPostBack)
    {
        Page page = (Page)HttpContext.Current.CurrentHandler;
        ScriptManager.RegisterStartupScript(page, this.GetType(), "JQueryCycle", "cycle();" ,true);
        LoadSpecials();

    }
}

protected void Timer1_Tick(object sender, EventArgs e)
{
    UpdatePanel1.Update();
    Label1.Text = DateTime.Now.ToString();
    LoadSpecials();
}

protected void Timer2_Tick(object sender, EventArgs e)
{       
    UpdatePanel2.Update();
    Label2.Text = DateTime.Now.ToString();
    Page page = (Page)HttpContext.Current.CurrentHandler;
    ScriptManager.RegisterStartupScript(page, this.GetType(), "JQueryCycle", "cycle();", true);       
}