Question

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">   
                    <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();        
}

Answer 1

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.