Hook to AJAX End Event on Client Side

  • Thread starter Thread starter Lit
  • Start date Start date
L

Lit

Hi,

I would like to run some dynamic-JavaScript code at the end of a callback of
an AJAX Call. for an update Panel

1---I click on a button on the browser,
2---AJAX method called server
3---some AJAX method get data from server , browser renders new info + send
some JavaScript code with it.
4---Then after that I would like to run a client side JavaScript code that
came with the AJAX callback data.

I tried to Register a Startup JavaScript code but it does not run within
AJAX ??

Any Ideas??

Thank You,

Lit
 
Hello,

Take a look at InitializeRequest and EndRequest (on end request you can
check which update panel triggered the petition and then run your javascript):

http://asp.net/ajax/documentation/l...PageRequestManagerInitializeRequestEvent.aspx

A sample code (this one is used to show and hid progress indicators when
they are associated to a panel ID, ** bug on AJAX**):

<script type="text/javascript">
// Well... UpdateProgress only works fine with triggers if it's not
associated to a single update panel
// to make it work with a single panel (like the case we have in this
case), we need to make a hack
// intercept the call, check the control name (response.write needed
from server because of the nasty
// ctl_00 prefix added to the control), and then show the progress
indicator associated to that control
// very ugly stuff, but we only will need it if we have two update
panles and two progress indicators.
// http://geeks.ms/blogs/sergiotarrillo/archive/2007/05/06/14266.aspx
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;

function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack())
{
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
// Dotnet panel
if (postBackElement.id ==
'<%Response.Write(btdotnetSearchFilter.ClientID.ToString());%>')
{

$get('<%Response.Write(UpdateProgressNet.ClientID.ToString());%>').style.display = "block";
}

// SQL Server Panel
if (postBackElement.id ==
'<%Response.Write(btnSQLServerfilter.ClientID.ToString());%>')
{

$get('<%Response.Write(UpdateProgressSQL.ClientID.ToString());%>').style.display = "block";
}

}
function EndRequest (sender, args) {
if (postBackElement.id ==
'<%Response.Write(btnSQLServerfilter.ClientID.ToString());%>')
{

$get('<%Response.Write(UpdateProgressSQL.ClientID.ToString());%>').style.display = "none";
}
}
function AbortPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
</script>


Good luck
Braulio

/// ------------------------------
/// Braulio Diez
///
/// http://www.tipsdotnet.com
/// ------------------------------
 
Hi Braulio,

Excellent.

You guided me in the right direction. I am looking into the events.
I need to figure out, best way and all, how to send extra data.. etc..

Thank you for you help.

Lit
 
Hi Braulio,

I am able to hook the EndRequestHandler and it is being Fired but I am
unable to pass any args to it.
I tried to use something like this


if (ScriptManager1.IsInAsyncPostBack) // in code behind.
{

ScriptManager1.RegisterDataItem(Label2, "My extra data to pass"); // this
is executing
or

ScriptManager1.RegisterDataItem(Label2, "My extra data to pass", false);
// this is executing
}

But still getting Nothing in the args.get_dataItems();: // on the client
side

var dataItems = args.get_dataItems();
alert(dataItems['Label2']); ***** In here I get Undefined, I am hoping
to get "My extra data to pass"

also tried alert(dataItems[0]); and I get undefined.

What Am I missing, do you see any problems or tricks, Am I missing
something in config file??

Thank you,

Lit
 
My mistake, I was not using the Client Id of Label2

Although why dataItems[0] does not work???

Lit


Lit said:
Hi Braulio,

I am able to hook the EndRequestHandler and it is being Fired but I am
unable to pass any args to it.
I tried to use something like this


if (ScriptManager1.IsInAsyncPostBack) // in code behind.
{

ScriptManager1.RegisterDataItem(Label2, "My extra data to pass"); // this
is executing
or

ScriptManager1.RegisterDataItem(Label2, "My extra data to pass", false);
// this is executing
}

But still getting Nothing in the args.get_dataItems();: // on the
client side

var dataItems = args.get_dataItems();
alert(dataItems['Label2']); ***** In here I get Undefined, I am
hoping to get "My extra data to pass"

also tried alert(dataItems[0]); and I get undefined.

What Am I missing, do you see any problems or tricks, Am I missing
something in config file??

Thank you,

Lit


Braulio Diez said:
Hello,

Take a look at InitializeRequest and EndRequest (on end request you can
check which update panel triggered the petition and then run your
javascript):

http://asp.net/ajax/documentation/l...PageRequestManagerInitializeRequestEvent.aspx

A sample code (this one is used to show and hid progress indicators when
they are associated to a panel ID, ** bug on AJAX**):

<script type="text/javascript">
// Well... UpdateProgress only works fine with triggers if it's not
associated to a single update panel
// to make it work with a single panel (like the case we have in this
case), we need to make a hack
// intercept the call, check the control name (response.write needed
from server because of the nasty
// ctl_00 prefix added to the control), and then show the progress
indicator associated to that control
// very ugly stuff, but we only will need it if we have two update
panles and two progress indicators.
// http://geeks.ms/blogs/sergiotarrillo/archive/2007/05/06/14266.aspx
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;

function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack())
{
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
// Dotnet panel
if (postBackElement.id ==
'<%Response.Write(btdotnetSearchFilter.ClientID.ToString());%>')
{

$get('<%Response.Write(UpdateProgressNet.ClientID.ToString());%>').style.display
= "block";
}

// SQL Server Panel
if (postBackElement.id ==
'<%Response.Write(btnSQLServerfilter.ClientID.ToString());%>')
{

$get('<%Response.Write(UpdateProgressSQL.ClientID.ToString());%>').style.display
= "block";
}

}
function EndRequest (sender, args) {
if (postBackElement.id ==
'<%Response.Write(btnSQLServerfilter.ClientID.ToString());%>')
{

$get('<%Response.Write(UpdateProgressSQL.ClientID.ToString());%>').style.display
= "none";
}
}
function AbortPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
</script>


Good luck
Braulio

/// ------------------------------
/// Braulio Diez
///
/// http://www.tipsdotnet.com
/// ------------------------------
Click to expand...
Click to expand...
 
Using args, I can get without problems which control was the on who triggered
the out of bound call, something like

postBackElement = args.get_postBackElement();
// Dotnet panel
if (postBackElement.id ==
'<%Response.Write(btdotnetSearchFilter.ClientID.ToString());%>')

About using DataItems, take a look at this link:

http://jeffzon.net/Blog/post/Something-you-probably-missed-about-registering-data-items.aspx

HTH
Braulio
/// ------------------------------
/// Braulio Diez
///
/// http://www.tipsdotnet.com
/// ------------------------------




Lit said:
Hi Braulio,

I am able to hook the EndRequestHandler and it is being Fired but I am
unable to pass any args to it.
I tried to use something like this


if (ScriptManager1.IsInAsyncPostBack) // in code behind.
{

ScriptManager1.RegisterDataItem(Label2, "My extra data to pass"); // this
is executing
or

ScriptManager1.RegisterDataItem(Label2, "My extra data to pass", false);
// this is executing
}

But still getting Nothing in the args.get_dataItems();: // on the client
side

var dataItems = args.get_dataItems();
alert(dataItems['Label2']); ***** In here I get Undefined, I am hoping
to get "My extra data to pass"

also tried alert(dataItems[0]); and I get undefined.

What Am I missing, do you see any problems or tricks, Am I missing
something in config file??

Thank you,

Lit


Braulio Diez said:
Hello,

Take a look at InitializeRequest and EndRequest (on end request you can
check which update panel triggered the petition and then run your
javascript):

http://asp.net/ajax/documentation/l...PageRequestManagerInitializeRequestEvent.aspx

A sample code (this one is used to show and hid progress indicators when
they are associated to a panel ID, ** bug on AJAX**):

<script type="text/javascript">
// Well... UpdateProgress only works fine with triggers if it's not
associated to a single update panel
// to make it work with a single panel (like the case we have in this
case), we need to make a hack
// intercept the call, check the control name (response.write needed
from server because of the nasty
// ctl_00 prefix added to the control), and then show the progress
indicator associated to that control
// very ugly stuff, but we only will need it if we have two update
panles and two progress indicators.
// http://geeks.ms/blogs/sergiotarrillo/archive/2007/05/06/14266.aspx
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;

function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack())
{
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
// Dotnet panel
if (postBackElement.id ==
'<%Response.Write(btdotnetSearchFilter.ClientID.ToString());%>')
{

$get('<%Response.Write(UpdateProgressNet.ClientID.ToString());%>').style.display
= "block";
}

// SQL Server Panel
if (postBackElement.id ==
'<%Response.Write(btnSQLServerfilter.ClientID.ToString());%>')
{

$get('<%Response.Write(UpdateProgressSQL.ClientID.ToString());%>').style.display
= "block";
}

}
function EndRequest (sender, args) {
if (postBackElement.id ==
'<%Response.Write(btnSQLServerfilter.ClientID.ToString());%>')
{

$get('<%Response.Write(UpdateProgressSQL.ClientID.ToString());%>').style.display
= "none";
}
}
function AbortPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
</script>


Good luck
Braulio

/// ------------------------------
/// Braulio Diez
///
/// http://www.tipsdotnet.com
/// ------------------------------
Click to expand...
Click to expand...
 
Back
Top