CODEWITHSUNDEEP
asp.netjquery
shailesh
shailesh

Reputation: 5023

fadeIn/fadeOut div tag after executing some server side code

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.

Upvotes: 1

Views: 4416

Answers (4)

idrumgood
idrumgood

Reputation: 4924

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

Upvotes: 0

Jess
Jess

Reputation: 42928

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.

Upvotes: 2

Muhit
Muhit

Reputation: 789

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

Upvotes: 1

Steve
Steve

Reputation: 31642

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.

Upvotes: 2

Related Questions