On the page I am building, I have four buttons which show/hide (visible="true" || visible="false") certain div's. What I want is before the AJAX function is called, my own custom function be called, which animates opacity of current visible div to zero, then displays a loading image and finally after the AJAX function completes another custom function is called which animates the "to be" shown div from zero opacity to 1 and from left to right. What I am trying to accomplish is windows phone 7 kind of effect in the webpage. So, any ideas how I can do that?
Add a comment
|
2 Answers
If your are using Asp.net ajax then yo can achieve this by following these steps
Register your javascript methods with these statement.
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandle);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandle);
Definition of registered methods
function beginRequestHandle(sender, Args)
{
alert("Begin Request Handle called.");
}
function endRequestHandle(sender, Args)
{
alert("End Request Handle called.");
}
4 Comments
Ashwin Singh
Where would be the best place to register the methods? Page_Load?
Adil
could be in head tag or just before where body tag closing. You just to put in a way that they are available before you make ajax request
Adil
Do you have asp.net ajax toolkit installed and integrated in your project?
Ashwin Singh
Yeah! Got it working, encosia.com/updated-your-webconfig-but-sys-is-still-undefined , Thanks adil!
You can do this by writing a custom ajax handler in your code. For example, in your cs file:
[WebMethod]
public static bool CustomAjaxMethod(string arg)
{
// do work
return true;
}
Then, in your aspx file:
<input type="button" value="Do Ajax Call" onclick="doWork();" />
And in javascript:
function doWork() {
// do your 1st animation here
PageMethods.CustomAjaxMethod('foo', callback);
}
function callback(result, userContext, methodName) {
if (methodName == 'CustomAjaxMethod') {
// may want to check result here
// do your 2nd animation here
}
}
