Pause before executing a jQuery action

Question

I'm putting an AJAX form in a bootstrap modal. After the form successfully submits, I want to display a success message and then hide the modal.

I first set the success message as msg, then replace the form with the message, and finally, I hide the modal in the three lines below.

var msg = '<div class="alert alert-success" id="' + $(replace_selector).attr('id') + '">Feedback Submitted</div>'
$(replace_selector).replaceWith(msg);
$el_parent.modal('hide');

How can I create a delay between the second and third lines of code? I tried delay but wasn't able to get it working correctly.

Answer 1

Try this:

    $(replace_selector).replaceWith(msg);   
    setTimeout(function(){
        $el_parent.modal('hide');
    }, 3000);