Call jquery fade in and out after Ajax

Having $("document").Ready(function() {

$("body").bind("Ajaxcomplete")! Function(e,xhr,settings) {

$("#divshowmsg").fadein(100);
$("#divshowmsg").fadeout(100);

});
});

Is it possible to show the popup div message after asp.net ajax tag completed Ajax ?
If having two update panels, how to associate one to each?
LVL 1
doramail05Asked:
Who is Participating?
 
MrunalConnect With a Mentor Commented:
Hi doramail05,
If you are using multiple Update Panels and if you want to do different functionality on updating on each update panel then you can below code...

with this code you can easily add your own code snippet whatever you want to do ...

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="KeepTimerOn_POC.TestPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        Outer Date Time:
        <%= DateTime.Now.ToLongTimeString() %>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                Date Time:
                <%= DateTime.Now.ToLongTimeString() %>
                <br />                
                <asp:Button ID="btnPostBack" runat="server" Text="Post Back" />
            </ContentTemplate>
        </asp:UpdatePanel><br /><br />
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                Date Time:
                <%= DateTime.Now.ToLongTimeString() %>                
                <br />
                <asp:Button ID="Button1" runat="server" Text="Post Back" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <script type="text/javascript" language="javascript">        
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function(sender, e) {
            alert('start');
        });
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, e) {
            if (e._response._xmlHttpRequest.responseText.indexOf("|UpdatePanel1|") !== -1) {
                alert('Update panel 1 is updated ...');
            }
            if (e._response._xmlHttpRequest.responseText.indexOf("|UpdatePanel2|") !== -1) {
                alert('Update panel 2 is updated ...');
            }            
        });
    </script>
    </form>
</body>
</html>

Open in new window

0
 
KhiluCommented:
Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time.

http://api.jquery.com/ajaxComplete/
$(document).ajaxComplete(function(event, xhr, settings) {
$("#divshowmsg").fadein(100);
$("#divshowmsg").fadeout(100);
});

Open in new window


You can use "ajaxSuccess" event for sucess

http://api.jquery.com/ajaxSuccess/

$(document).ajaxSuccess(function() {

$("#divshowmsg").fadein(100);
$("#divshowmsg").fadeout(100);

});

Open in new window

0
 
doramail05Author Commented:
Ok, like what if I have 2 update panels and would prefer to show 2 different message one each?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.