It's because your function called on your button's click doesn't have e.preventDefault(); set anywhere, and Jeff's does.
This is Jeff's code:
$('input[data-confirm], button[data-confirm]').on('click', function(e) {
var input = $(this);
input.prop('disabled', 'disabled');
//javascript pauses while it waits for you to hit the "yes" or "no" button
if( !confirm(input.data('confirm') ) {
//keeps the click event from triggering the form's submit event
e.preventDefault();
}
input.removeAttr('disabled');
});
What happens here is that the javascript waits for you to click "Yes" or "No" on the popup before it returns from the confirm() function. So if you click no, then e.preventDefault() runs. This keeps the button's click event from triggering the form's submit event.
Now, let's look at your javascript code:
$('input[data-confirm], button[data-confirm]').on('click', function(e) {
var input = $(this);
input.prop('disabled', 'disabled');
//javascript DOES NOT pause while bootstrap displays the modal, because it's just some HTML being moved around on the screen
$("#myModal").modal('show', function() {
var title = form.data('remote-title');
var message = form.data('remote-message');
$('.model-header h1').html(title);
$('.model-body p').html(message);
});
//e.preventDefault() is never called!
//after this function returns, the click event triggers the form's submit event
});
There's an important but subtle difference here: javascript doesn't stop running just because the modal is fading in. It's goes right ahead and runs the rest of the function. Since there's no prevent default here, the click event trigger's the form's submit event, which sends off the AJAX request