views:

269

answers:

2

I'm trying to figure out how to display a "Saved" message on the screen (with a fadeout effect courtesy of JQuery) whenever an AJAX call is made from a control that actually saves the form. The form is relatively complicated and has 5 seperate UpdatePanels where some--but not all--of the controls will do a post-back that will save the form.

I know which controls should cause the save message to be displayed. However, I don't know how to identify these controls when the AJAX request is complete. I think I need to add my logic in the "endRequestHandler" below but I could be wrong.

REVISION This is something I may want to use across my entire site. I need to come up with a common mechanism to declaratively indicate that a control should cause the "Saved" message to display whenever it is the source of a post-back. Can I put something on the control that could be accessed in the InitializeRequestHandler or EndRequsetHandler (see below)? Maybe I should just add a custom attribute that I can find using JQuery? END REVISION

Please let me know if you need more information. Thanks in advance for your help!

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);

function endRequestHandler(sender, args) {
  //--check to see if the sender should cause the "Saved" message to display
    //--use JQuery Fadeout effect to make the "Saved Message" display on the screen
    //  temporarily
}
A: 

You could store who made the ajax call to begin with, then in your end_request unset the variable you stored it in.

I am assuming there is a begin_request event that gives you this, if not you could have your element call a function first that sets who is initating the call then have the function perform the call back.

Edit

You answered your own question. Add a custom attribute to the control.

JoshBerke
Thanks for the feedback. I think that would work if I was going to be OK with hard-coding the controls that should cause the save. I modified my questions slightly to better indicate my intentions.
jakejgordon
A: 

To solve the problem I put a hidden field on my Master Page with id='hfSaveMessageText'. This will hold the message to display, if any. I also put a span with id='mpSaveSpot' and the appropriate styling on the MasterPage. This is where my messages will show up.

I then created a sever-side method that accepts a System.Web.UI.Page and a string message to display. The method gets a reference to the hidden field on the master page and sets the value to the message that the user passes in (e.g.: "Record Deleted" or "Email Sent").

The following javascript runs on every asynchronous postback endRequest to see if there is a message that needs to be displayed. If so, I display the message and fade it out over 4.5 seconds (courtesy of JQuery fadeOut).

//--Get an instance of the PageRequestManager so we can
//  designate an end-request handler
var prm = Sys.WebForms.PageRequestManager.getInstance();
//--designed the displayFadeoutMessage as the end request handler
prm.add_endRequest(displayFadeoutMessage);

function displayFadeoutMessage() {
    //--if there is a message to display then show it
    if ($("#ctl00_hfSaveMessageText").attr("value") != "") {
        //--add a span to the placeholder span and then fade it out 
        //  over 4.5 seconds
        $("#mpSaveSpot").append("<span id='spanFadeoutMessage' style='background-color:#ddd;'>" + $("#ctl00_hfSaveMessageText").attr("value") + "</span>").fadeOut(4500, function() {
                //--once the message is faded out then clear the message hidden
                //  field and clear out the message span
                $("#ctl00_hfSaveMessageText").attr("value", "");
                $("#mpSaveSpot").empty();
        });
    }
}

Now I have a re-usable mechnism for displaying fancy fadeout messages on my site regardless of the page I am on. Problem solved!

jakejgordon