Question

I’ve got an Ajax update happening to my MVC view. It displays a message telling the user the operation has completed:

<% if (ViewData["colorOptionsMessage"] != null) { %>
    <span class="ajaxMessage"><%= ViewData["colorOptionsMessage"] %></span>
<% } %>

I want to atuomatically fade this message out once it appears, and I’d like to do it once, and have it work site-wide. This is what I tried, which doesn’t work (the message appears, but the alert does not show):

$(function () {
   $(".ajaxMessage").live("load", function () { 
      alert("once I can get this to show I'll put in a jueryUI fadeOut"); });
});

EDIT

Just to be clear, I don’t need help with the fade out code; I just need help getting this call to Live() to wire up properly.

Answer 1

There’s no direct way to be informed automatically when new elements are added to the page. $('.ajaxMessage').live('load') would only happen when the load event fires on an image, iframe or object/embed/applet with class="ajaxMessage", a load event is not fired with its own target for every new element that enters the page.

You could only do this by (a) DOM Mutation Events, which generally aren’t widely enough supported, or (b) constantly polling to fetch the .ajaxMessage selector and seeing if any new elements appear in the results.

Better to manually $('.ajaxMessage', function() {...}) immediately after (potentially) adding the content to the page, in the ajax() method’s success handler.

ETA:

that jQuery handler doesn’t seem to execute after an ajaxForm success

If you can’t catch success directly you could try registering a global success handler using ajaxSuccess.