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

Question

У меня есть небольшая веб-форма с всплывающим стилем shadowbox. Затем форма отправляется и информация отправляется через 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);
    }
  });


});

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

Answer 1

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

return false;

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

Вот EG из API

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

Answer 2

Попробуйте вместо этого jQuery.Он использует событие отправки формы и jQuerys запрещает использование по умолчанию , чтобы остановить отправку формы.Это подробно описано в документации события отправки .

 $('#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);
    }
  });


});

Answer 3

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