jQuery Girl
  1. jQuery Girl
  3. jQuery Submit Rafraîchissant Page
Intereting Posts
solution de contournement de Chrome 37+ dialog de dialog modal returnValue Retarder l’ajout d’une classe de 2 secondes en survol () CORS – La fonction d’erreur Ajax signale le code d’erreur à 0 pour une requête d’API renvoyant 401 jQuery UI sélectionnable désactiver pré-compilation de templates jsrender Comment envoyer une demande manuelle jQuery Ajax à une application JSF? Comment obtenir un texte avant un élément donné en utilisant jQuery? Comment déclencher un événement iframe Jquery Répéter la fonction JS JQuery bloqué au contrôle en amont de la CORS et à la réponse fantôme d’IIS rendre div background image sensible avec bootstrap 3 Formater et append des données JSON au format html div Problème de nom de fichier Plupload Evénement $ (window) .blur affectant Iframe comment append ou supprimer l’atsortingbut readonly de la zone de texte en cliquant sur le bouton radion dans cakephp à l’aide de jquery?

jQuery Submit Rafraîchissant Page

Le code suivant est destiné à faire une requête POST purement ajax, mais il semble effectuer le POST via ajax, puis le navigateur accède à la réponse.

Le HTML …

Le jQuery … 

 $('#bin form').submit(function() { $.post($(this).attr('action'),{ success: function(data) { $(this).hide().siblings('form').show() }, data: $(this).serialize() }); return false; })

Autant que je sache, le return false; La ligne doit signifier que quoi qu’il en soit, tout appel à la fonction de soumission ou un clic sur le bouton ‘Soumettre’ ou la frappe de la touche entrée signifie que ma fonction sera exécutée et que le navigateur ne naviguera pas vers /bin/add ou /bin/remove . Mais pour une raison quelconque, le navigateur change de page.

Une idée de ce que je fais mal ici? Merci.

Je parie que c’est à cause du $(this) , essayez-le de cette façon …. 

 $('#bin form').submit(function() { var $this = $(this); $.post($this.attr('action'), { success: function(data) { $this.hide().siblings('form').show() }, data: $this.serialize() }); return false; });

démo pas d’erreur

démo avec l’erreur

Il se peut que votre JavaScript échoue et que le comportement par défaut soit exécuté.

Essayez d’examiner la XHR dans un outil comme Firebug.

Vous pouvez également essayer event.preventDefault() (où le premier argument de votre rappel d’ event est event ).

Utilisez event.preventDefault() pour empêcher l’action par défaut de l’événement. Un avantage est que vous pouvez placer ceci avant la demande Ajax, de sorte que si cela échoue, vous aurez toujours empêché la soumission du formulaire.

Votre code échoue car la valeur de this dans votre rappel de succès est l’object de window global. Votre tentative pour le cacher échoue. Vous voulez probablement que this se réfère au formulaire, comme ceci: 

 $('#bin form').submit(function(ev) { var _this = this; ev.preventDefault(); $.post($(this).attr('action'), { success: function() { $(_this).hide().siblings('form').show(); }, data: $(this).serialize() }); })

Voir un exemple de travail .

Est-ce que le $(...).submit(...) intérieur d’un $(document).ready(function(){ code here }); ?

devrait être comme: 

 $(document).ready(function() { $('#bin form').submit(function() { $.post($(this).attr('action'), { success: function(data) { $(this).hide().siblings('form').show(); }, data: $(this).serialize() }); return false; }); });