每当AJAX计时器触发时，JQuery都会重新运行

时间：2011-09-14 15:02:12

标签： jquery asp.net ajax asp.net-ajax

我在页面上有两个部分，左部分和右部分。

Left Section位于条件更新面板中，依赖于Timer1。

右侧部分位于条件更新面板中，依赖于定时器2。

Right Section有一个JQuery图片周期。即使Timer 1触发，JQuery图片周期也会刷新，我认为这是因为JQuery代码与更新面板无关，并且在更新面板之外注册（即使物理代码在更新面板中）。

我试图以与Left Section不同的频率更新Right Section，但是Left Section通过JQuery刷新了正确的部分。

以下是支持代码：

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

2 个答案:

答案 0 :(得分：1)

您可以通过以下方式检测异步回发的发生时间：

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

但是，要确定更新的更新面板可能会从客户端感兴趣。有可能确定，然后调用循环插件。或者，您可以将插件代码放在单独的方法中：

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

尝试从服务器调用它：

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

当适当的计时器触发时。

答案 1 :(得分：0)

感谢您的回复。我真的不了解e.get_isPartialLoad（），因为我不知道如何检查从JavaScript触发的asp.net更新面板事件，因为我没有使用大量的JavaScript（试图学习更多的java）。 / p>

但是我理解你的第二个答案，这很棒。而不是在pageLoad（）或Document.Ready（）中使用我的JQuery循环，将它放在自己的函数中解决了我所有的问题:)。现在循环不在页面特定的功能中，我可以随时调用或重新初始化它，并且在部分回发期间不会不断调用它。

这是我使用的解决方案修改后的代码，现在Right Section只会在Timer2触发时重启JQuery：

    <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);       
}
相关问题
最新问题