Question

I have a jQuery ajax script to process a form on submit. However, I have a a couple callbacks to to add “processing…” and “done” etc during the ajax request. However, after it’s all finished the script is supposed to add the edit button back to the person could use the form again, but it’s adding the button twice.

This is where the ajax request begins, the comments will help you follow

$.ajax({

    url: "../ajax/update_site_info.php?id=" + $('[name="site_id"]').val() + "&field=" + $(parent).children("input").attr("name") + "&value=" + $(parent).children("input").val(),
    cache: false,
    success: function(response){

        //alert('success');

        // On success, fade out the "Saving..."
        $(parent).children('.message').fadeOut(150, function(){

            //alert('message');

            // Remove the save button (submit button)
            $(parent).children(".jUpdateSave").remove();

            // Add "Saved!"
            $(parent).append('<span class="message">' + response + '</span>');

            // Let "Saved!" linger for a while before it fades out
            $(parent).children('.message').delay(1500).fadeOut(250, function(){

                //alert("stop");  // THIS IS WHERE THINGS HAPPEN TWICE

                // Put the edit button back
                $(parent).append('<a class="jUpdate"><img src="images/shared/icon_edit.png" width="16" height="12" alt=""></a>');

                // Remove the "Saved1" message
                $(parent).children('.message').remove();
            });
        }); 
    }
}).error(function(){

    $(".message").text("There was an error proccessing your request. [0]");
});

The full script is here.

Everything about that works, except that last callback happens twice (it will alert stop twice).

Any thoughts?

Answer 1

Does

$(parent).children('.message')

return two elements?