Hi. I'm using RadAjaxManager and it's client events OnRequestStart/End to do some client side stuff. Well recently a need came up to do something before each start and end events across all pages of the app. I thought it would be relatively simple by replacing OnRequestStart function via javascript's ".apply" method (you can see it in included code below). However, I ran into an issue where what I wanted to do only happens on second and all subsequent requests, BUT not on the first request. I even thought of using PageRequestManager's request begin/end events, but those happen after the AjaxManager events and I need to do things before those. Below is timing of what happens, via firebug's console.log.
on ajax request start
begin request via PageRequestmanager
POST
end request via PageRequestmanager
on ajax request end
modified ajax start
on ajax request start
begin request via PageRequestmanager
POST
end request via PageRequestmanager
on ajax request end
modified ajax end
Again, second set is what I want to have happen, however Telerik must be doing something that's preventing me to replace RadAjaxManager OnRequestStart/End functions, like below, again it works just fine second time AjaxManager is triggered:
var start = OnAjaxManagerRequestStart;
OnAjaxManagerRequestStart = function() {
console.log('modified ajax start');
//doing something here
start.apply(this, arguments);
};
Code is below, any ideas?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="wPanelTest.aspx.cs" Inherits="wPanelTest" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="rad" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"></head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<rad:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function OnAjaxManagerRequestStart(sender, eventArgs) {
console.log('on ajax request start');
}
function OnAjaxManagerResponseEnd() {
console.log('on ajax request end');
}
</script>
</rad:RadCodeBlock>
<div>
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="I should be updated by button click"></asp:Label>
</div>
<rad:RadAjaxManager ID="RadAjaxManager1" runat="server" useembeddedscripts="false">
<ClientEvents OnRequestStart="OnAjaxManagerRequestStart" OnResponseEnd="OnAjaxManagerResponseEnd" />
<AjaxSettings>
<rad:AjaxSetting AjaxControlID="Button1">
<UpdatedControls>
<rad:AjaxUpdatedControl ControlID="Label1" />
</UpdatedControls>
</rad:AjaxSetting>
</AjaxSettings>
</rad:RadAjaxManager>
</div>
</form>
<script type="text/javascript">
window.onload = function() {
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
console.log('begin request via PageRequestmanager');
}
function EndRequestHandler(sender, args) {
console.log('end request via PageRequestmanager');
}
var start = OnAjaxManagerRequestStart;
OnAjaxManagerRequestStart = function() {
console.log('modified ajax start');
//doing something here
start.apply(this, arguments);
};
var end = OnAjaxManagerResponseEnd;
OnAjaxManagerResponseEnd = function() {
end.apply(this);
//doing something here
console.log('modified ajax end');
};
};
</script>
</body>
</html>
CODEBEHIND:
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class wPanelTest : System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
Label1.Text = "I was updated via ajax manager at " + DateTime.Now;
}
}