Whenever either AJAX timer fires, JQuery re-runs. : The Official Microsoft ASP.NET Forums

Reply

mausimo

Member

118 Points

132 Posts

Whenever either AJAX timer fires, JQuery re-runs.

Sep 13, 2011 07:23 PM|LINK

Hey,

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>

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

Edited by mausimo on Sep 13, 2011 07:23 PM

Reply

chetan.sarod...

All-Star

65739 Points

11138 Posts

Re: Whenever either AJAX timer fires, JQuery re-runs.

Sep 14, 2011 03:26 AM|LINK

When the UpdatePanel refreshes, it destroys the DOM for those TextBoxes, removing the jQuery event handlers in the process. UsepageLoad() instead of $(document).ready(), and they will be wired back up after every partial postback

Chetan Sarode
Senior Software Engineer,
Approva Systems Pvt Ltd, Pune, India.