jQuery: if element gets loaded with ajax event?

Question

hey guys, weird question. I'm trying to extend a little plugin that's in my blog's sidebar. The plugin comes with a bit of Ajax. It contains a form and when it's submitted it loads a div#error_msg or a div#success_msg (all through ajax).

Is there a way for me to find out when one of this divs appear? Just so get what i want: I want to prepend a text to the form in the sidebar when the form gets submitted. as soon as one of the two divs (either error or success) get's loaded in that form, i want to remove the prepended element again.

Do you guys know a way to do that? I don't want to edit the source code of the plugin!

edit: checkMsg() not defined! Why?

var check = 0;

function showLoader() {
        $('#mc_signup_form').prepend('<span class="loading"> loading </span>');
        check = setInterval ( "checkMsg()" , 300 );
    }

function checkMsg() {
    if ( $('.mc_error_msg').length == 0 || $('.mc_success_msg').length == 0 ) {
        $('#mc_signup_form .loading').remove();
        clearInterval(check);
    }
}

Answer 1

You can query the DOM in a timeout loop to see if it's there. Brutish but effective. You would be better off finding where the app makes the ajax call and tapping into the response handler directly.

Answer 2

The prepending you can do by simply modifying the form's onsubmit attribute, but the removing of the text is a little more tricky.

Using JQuery's AOP Plugin you can run custom events before or after any function. If you can find the js function the plugin is using to add the div, you could remove your message after the function runs.

Depending on how the plugin's coded, there's likely a much cleaner way. See what it's doing to trigger the adding of the div, there may be an opportunity for you to inject a callback. Also, if you add the name of the plugin to the question, the community will be able to answer you more specifically.