jQuery preventDefault() ne fonctionne pas à l'intérieur d'appel AJAX
Donc, je suis en train de faire une vérification lorsqu'un utilisateur tape un mail afin de savoir si l'email existe ou pas.
$('form.recover-form#check-form').on('submit', function(e){
var form = $(this),
input = $('.check-recover-email'),
span = $('.recover-error'),
email = input.val();
span.text('');
e.preventDefault();
$.ajax({
url: 'ajax/check-email',
async: 'false',
cache: 'false',
type: 'POST',
data: {email: email},
success: function(response) {
if ( response == 'no' ) {
span.text('email does not exist');
} else if ( response == 'ok' ) {
form.submit();
}
}
});
});
Le code php
if ( Input::isPost('email') ) {
$email = Input::post('email');
$check = $dbh->prepare(" SELECT * FROM users WHERE email = :email ");
$check->execute(array( 'email' => $email ));
echo ( $check->rowCount() == 1 ) ? 'ok' : 'no' ;
}
De cette façon, dès que j'ai envoyer le formulaire, il soumet et la e.PreventDefault()
à l'intérieur de l'appel AJAX ne fonctionne pas. Si j'ai mis e.PreventDefault()
avant l'appel AJAX cependant, la forme ne se soumet pas et le message d'erreur s'affiche si l'email n'existe pas ( c'est ce que je veux atteindre ).
Je ne comprends pas où est le problème, j'espère que vous pouvez aider.
Merci.
EIDT: C'est la mise à jour du code
- vous ne pouvez pas le faire en raison de la nature asynchrone des requêtes ajax...
- Il suffit de le garder à l'extérieur de la demande que votre faisaient..
- e.preventDefault(); ne fonctionne pas parce que l'ajax est asynch appel. Veuillez faire de l'ajax de synchronisation ou de l'utilisation de rappel d'arriver à ce
- Le flux des choses est un peu déroutant ici. Ce qui se passe réellement, c'est qu'ils l'utilisateur soumet le formulaire qui déclenche une requête ajax qui s'exécute en arrière-plan. Lorsque cette requête retourne vous essayez d'annuler l'événement submit, mais il est loin de la fin, elle l'a depuis longtemps terminée.
- Oui je comprends que la preventDefault() ne fonctionne pas à l'intérieur de l'appel ajax, mais si je le déplacer vers le haut avant de l'ajax, comment puis-je le reprendre ensuite l'envoyer et aller sur la soumission du formulaire, si l'appel ajax est un succès ?
Vous devez vous connecter pour publier un commentaire.
Le problème, c'est que vous n'appelez pas
preventDefault
lors de la manipulation de l'événement. Au lieu de cela, lors de la manipulation de l'événement, vous commencer un appel ajax (qui est asynchrone), puis laissez l'événement continuer. L'appel ajax complète plus tard, ce qui est trop tard pour empêcher l'événement par défaut — c'est déjà arrivé.Déplacer le
e.preventDefault()
directement dans le gestionnaire d'événements, à l'extérieur de l'ajaxsuccess
gestionnaire.Dans un commentaire, vous avez dit:
Vous ne pouvez pas tenir en place l'original du formulaire de soumission en attente pour le résultat d'un appel ajax asynchrone. Ce que vous faire est d'annuler l'original du formulaire de soumission, de faire de l'ajax, et puis, si le résultat est bon, re-soumettre le formulaire à l'aide de la
submit
méthode sur le brut DOMform
élément. Cette méthode ne re-déclenchersubmit
des gestionnaires d'événements.Exemple: Vivre copie
submit
fonction de la crue de l'élément DOM pour la forme soumet sans déclenchersubmit
gestionnaires.) Mais comme vous êtes la sérialisation de la forme de toute façon quand on fait le chèque, pourquoi ne pas simplement la poignée il y droite lors du traitement de l'appel ajax?target
sur ce que serait la cause d'une nouvelle fenêtre/onglet ouvert, et puisqu'il n'était pas le cas lors de la manipulation d'un événement initié par l'utilisateur, le navigateur a été la prévention de la popup. Si vous n'avez pas detarget
, puis lesubmit
travaillent de manière fiable.Vous ne pouvez pas empêcher l'action par défaut à partir d'un gestionnaire de succès de la requête ajax en raison de la nature asynchrone de lui.
Plutôt par défaut empêcher la soumission du formulaire, puis dans le gestionnaire de succès si elle est valide, puis d'appeler le soumettre à nouveau.
response
Tout d'abord, vous avez les options sont incorrectes.
cache
etasync
nécessitent des valeurs booléennes, pas de chaînes.Deuxièmement, au lieu de soumettre le formulaire après la requête ajax vous êtes plutôt déclenchement de l'évènement. Essayez plutôt ceci.
Il renvoie le formulaire nœud plutôt qu'un objet jquery, vous permettant de soumettre directement plutôt que de déclenchement d'un événement (sinon vous auriez une boucle infinie.)
Vous n'avez pas vraiment besoin
async: false
oucache: false
dans ce cas.Vous devez faire ce qui suit:
Avis comment je suis passé de l'e.preventDefault() pour le début. C'est parce que vous étiez en appelant lorsque la requête ajax répond qui pourrait arriver 100s de millisecondes ou même quelques secondes après que le formulaire a été soumis
Cela se produit parce que le succès de la fonction passée pour
jQuery.ajax()
est exécutée assyncly, alors il sera exécuté après la fonction de gestionnaire d'événement est fini.Vous devez mettre le
e.preventDefault()
de l'ajax fonction. et tout fonctionnera.Mieux, vous pouvez essayer quelque chose comme cela ,