Solved

Call jquery fade in and out after Ajax

Posted on 2013-01-22
3
746 Views
Last Modified: 2013-01-23
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
Comment
Question by:doramail05
3 Comments
 
LVL 3

Expert Comment

by:Khilu
ID: 38808811
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
 
LVL 1

Author Comment

by:doramail05
ID: 38808870
Ok, like what if I have 2 update panels and would prefer to show 2 different message one each?
0
 
LVL 22

Accepted Solution

by:
Mrunal earned 500 total points
ID: 38809575
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Established in 1997, Technology Architects has become one of the most reputable technology solutions companies in the country. TA have been providing businesses with cost effective state-of-the-art solutions and unparalleled service that is designed…
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question