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 ments 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?

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 ments 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?

• javascript
• ajax
• jquery
• callback

• Are there multiple children under parent with class message? It's difficult to say without the HTML code. – AppleGrew Commented Aug 11, 2011 at 19:22

3 Answers 3

Does

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

return two elements?

You are calling .append() on each .message. I assume you have two, since you reference one here:

$(parent).children('.message').fadeOut(150, function(){

and append one here:

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

The button will be re-created for each element with the .message class.

To fix the problem, avoid creating multiple child elements with class .message, or target your delay()/fadeOut() statement to run only once.

Before the ajax response for multiple request es I think there are more than 1 .message spans on the page. Just to fix that try this code.

// 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:first').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:first').remove();
            });
        });