Pourquoi cela fonctionne-t-il dans Firefox mais pas dans Safari?

Question

J'ai une petite forme de web qui montre le style de shadowbox. Le formulaire est ensuite soumis et l'information est envoyée via ajax. Cela fonctionne un régal dans Firefox, cependant dans Safari, en appuyant sur soumettre il ferme la boîte de l'ombre et semble simplement soumettre le formulaire (pas ajax).

Le code HTML du bouton et d'autres choses ...

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

Le code Jquery pertinente est la suivante:

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


}); 

Je me demande si safari doesn Je n'aime pas relier la fonction de soumission car elle semble fonctionner comme si je n'écrivais aucun code JS ... que pensez-vous?

Answer 1

Je pense que vous devez ajouter

return false; 

après l'appel ajax pour arrêter le défaut de soumettre l'action se produisant.

Voici le EG de la api

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

Answer 2

Je ne peux pas vraiment parler pour Safari, puisque je ne l'utilise pas, mais le symptôme (la soumission de formulaire qui continue comme d'habitude) sonne une cloche avec mes expériences passées. Si un gestionnaire d'événements JavaScript (tel que onsubmit) déclenche une exception, l'action par défaut dans à peu près tous les navigateurs est de continuer avec l'action initiée par l'utilisateur. Vous pouvez envisager d'utiliser un débogueur JavaScript (inutile s'il y en a pour Safari) ou d'encapsuler l'ensemble du gestionnaire de soumission dans un bloc try/catch et alert() le texte de l'exception. Cela pourrait très bien vous conduire directement au vrai problème.

Answer 3

Essayez cette jQuery à la place. Il utilise l'événement submit du formulaire et jQuerys prevent default pour arrêter la soumission du formulaire. Ceci est détaillé dans le 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); 
    } 
    }); 


});