Почему это работает в firefox, но не в сафари?

Question

У меня есть небольшая веб-форма, которая всплывает в стиле тени. Затем форма отправляется и информация отправляется через ajax. Это работает в firefox, однако в сафари, нажав submit, он закрывает теневое окно и, кажется, просто отправляет форму (нет ajax).

HTML-код кнопки и прочее ...

<div id="booking_box_header"></div> 
<div id="booking_box_content"> 


    <div id="booking_box_left"> 


</div> 

<div id="booking_box_right_container"> 

<form id="booking_form_1" method="post"> 

    <input name="event_id" value="4" type="hidden"> 
    <input name="time_id" value="18" type="hidden"> 
    <input name="booking_email" value="blah@domain.com" type="hidden"> 

    <div id="booking_box_right"> 
     <input name="booking_name" type="text"> 
     <input name="booking_mobile" type="text"> 

     <div id="ticket_select"> 
     <select name="booking_state" id="booking_state"></select> 

     // the submit button 
     <input id="next" value="Next" type="submit"> 

     </div> 

    </div> 
    </form> 
</div> 

Соответствующий код Jquery выглядит следующим образом:

$('#booking_form_1').submit(function() { 

    var booking_email = $('input[name=booking_email]').val(); 
    var event_id = $('input[name=event_id]').val(); 
    var time_id = $('input[name=time_id]').val(); 

// bring up the loading 
    $('#booking_box_content').html(loader_img); 

    // submit the data to the booking form again 
    $.ajax({ 
    type: 'POST', 
    url: 'process.php', 
    cache: false, 
    data: 'booking_step=1&event_id='+event_id+'&time_id='+time_id+'&booking_email='+booking_email+'', 
    success: function(data) { 
     $('#booking_box_content').html(data); 
    } 
    }); 


}); 

Я интересно, если сафари Безразлично Мне нравится, что я переписываю функцию отправки, потому что, похоже, работает только так, как будто я даже не написал код JS ... что вы думаете?

Answer 1

Я думаю, что нужно добавить

return false; 

после вызова Ajax, чтобы остановить по умолчанию представить действия с встречающимся.

Вот ЭГ от api

$('#target').submit(function() { 
    alert('Handler for .submit() called.'); 
    return false; 
}); 

Answer 2

Я не могу говорить о Сафари, потому что я не использую его, но симптом (представление формы идет вперед, как обычно) звонит с моим прошлым опытом. Если обработчик событий JavaScript (например, onsubmit) генерирует исключение, действие по умолчанию почти в каждом браузере должно продолжаться с любыми действиями, инициированными пользователем. Возможно, вы захотите использовать отладчик JavaScript (dunno, если они есть для Safari), или обертывание всего обработчика отправки в блок try/catch и alert() текст исключения. Это вполне может привести вас к реальной проблеме.

Answer 3

Попробуйте JQuery вместо этого. Он использует событие отправки формы и jQuerys prevent default, чтобы остановить отправку формы. Это подробно описано в documentation of the submit event.

$('#booking_form_1').submit(function(e) { 
    e.preventDefault(); 
    var booking_email = $('input[name=booking_email]').val(); 
    var event_id = $('input[name=event_id]').val(); 
    var time_id = $('input[name=time_id]').val(); 

// bring up the loading 
    $('#booking_box_content').html(loader_img); 

    // submit the data to the booking form again 
    $.ajax({ 
    type: 'POST', 
    url: 'process.php', 
    cache: false, 
    data: 'booking_step=1&event_id='+event_id+'&time_id='+time_id+'&booking_email='+booking_email+'', 
    success: function(data) { 
     $('#booking_box_content').html(data); 
    } 
    }); 


});