fadeIn/fadeOut div tag after executing some server side code.

Question

Here is my code

<div id="AuthenticateUser" runat="server" style="display:block" >
   //login control
   <asp:button id="ValidateUser" ... />
</div>

<div id="ForceToChangePassword" runat="server" style="display:none" >
  //reset password control
</div>

On click of "ValidateUser" button, I do check whether user is valid or not. Based on some condition I do need hide "AuthenticateUser" div tag and show "ForceToChangePassword" div tag.
I really like the jQuery fadeIn/fadeOut effect. I can easily do that on client side. But how can I give that effect after executing server side code?

I tried to call javascript method from code behind that method has a fadeIn/fadeOut logic but it seems like that javaScript method is never been called.

Answer 1

The best way is to replace your asp:button (which I'm assuming is doing a postback) with an html button and some javascript to make an AJAX call (or JSON & REST call).

jQuery supports REST services really well with their .ajax method.

http://api.jquery.com/category/ajax/

WCF also supports JSON & REST services very nicely.

http://www.west-wind.com/weblog/posts/324917.aspx

It's a match made in heaven.

When the web service call completes, a javascript method (specified in the jquery .ajax call) will get called, and you can do the fade at that point.

Answer 2

You need to use an AJAX call for something like this. http://api.jquery.com/category/ajax/

Basically, the javascript will send your login request to your serverside code. The serverside will send the response back (you can decide what kind of response).

Then use that response to determine if you should be fading in or not.

$.post('login.aspx', {credentials (hopefully encrypted)}, callbackFunction(dataFromServer){
    if(dataFromServer == loggedin)
          fadein
    else
          don't
});

Answer 3

If you make any ajax request then you must have to call the function which handling fadeIn/fadeOut logic, within the response callback function. you have to do something like

$.ajax({
   url: "url-to-backend",
   success: function(msg){
     changeDiv();
   }
 });
function changeDiv()
{
   //your code to handle fadeIn/fadeOut logic;
}

Thanks

Answer 4

If you have the AJAX extensions, put this in the button event handler. (C# example, easily converted to vb.net)

ScriptManager.RegisterClientScriptBlock(this, GetType(this), "fader", "$('#AuthenticateUser').fadeOut(); $('#ForceToChangePassword').fadeIn();");

This will send a client script after the postback has completed. Here is the documentation. This also requires a ScriptManager on the page. If you don't have the AJAX extensions you can probably use it from the Page's method itself.