[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 833
  • Last Modified:

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?
0
doramail05
Asked:
doramail05
1 Solution
 
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
 
MrunalCommented:
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

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now