IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Ajax lors d'un submit


Sujet :

jQuery

  1. #1
    Invité
    Invité(e)
    Par défaut Ajax lors d'un submit
    Bonjour.

    J'utilise struts 2 mais souhaite gerer l'ajax "manuellement", c'est à dire sans aucun plugin (jar) supplémentaire, (struts-jquery ou dojo).

    J'ai donc un formulaire qui lance une action struts lors du submit.

    Je souhaite lors de la validation du formulaire, déclencher une action ajax pour afficher par exemple une barre de progression le temps que l'action s'exécute et avant que j'arrive à la page suivante.

    Dans l'exemple (pour plus de simplicité), je souhaite afficher tout simplement un DIV suite à la validation du formulaire.

    JSP :
    Code jsp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <s:form method="POST" action="validerConnexion" namespace="/">
         <!--<s:textfield name="utilisateur.utCode" label="%{getText('label.utilisateur.utCode')}"  onblur="johannjs();"/>-->
         <s:textfield name="utilisateur.utCode" label="%{getText('label.utilisateur.utCode')}" />
    ...

    JAVASCRIPT :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    $(document).ready(function(e) {
    	$( "#monsubmitjquery" ).click(function(e) {
    	//	 e.preventDefault();
     		johannjs();
     	//	return false;
     
     		// si return false : la fonction johannjs (ajax) sort en erreur et le formulaire est submitté
     		//si pas return false : elle s'exécute bien mais le formulaire n'est pas submitté.
     
    	});
     
    });
     
    function johannjs() {
    	var data = $('#validerConnexion').serialize();
    	$.ajax({
    		type : "POST",
    		url : "/DMIST/validerConnexionAjax.action",
    		data : data,
    		beforeSend : function(response) {
    			$('#div2').html('coucou beforeSend');
    		},
    		success : function(response) {
    			$('#div2').html(response);
    		},
    		error : function(e) {
    			alert('Error: ' + e);
    		}
    	});
    }
    Comme indiqué dans le javascript, je n'arrive pas à exécuter l'ajax ET submitter le formulaire.
    J'ai lu que cela pouvait venir du fait que l'évènement "onclick" attendait un "return false".
    Le problème que j'ai :
    si je mets "return false" : la fonction johannjs (ajax) sort en erreur et le formulaire est submitté
    si je ne mets pas "return false" : elle s'exécute bien mais le formulaire n'est pas submitté.

    Y-aurait-il une solution?

    Pour votre information, ma foction ajax fonctionne très bien si la déclenche sur l'évènement onBlur d'un élément (textfield) du formulaire.

    Merci d'avance.
    Johann
    Dernière modification par Bovino ; 15/11/2013 à 11h26. Motif: Merci d'indiquer le langage utilisé ([code=xxx]) pour activer la coloration syntaxique !

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    $('#validerConnexion').serialize(); ID ? <s:form method="POST" action="validerConnexion" namespace="/">.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Invité
    Invité(e)
    Par défaut
    l'id du formulaire est implicite , car le code html généré est :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <form id="validerConnexion" name="validerConnexion" action="/DMIST/validerConnexion.action" method="POST">
    <table class="wwFormTable">
    ....
    </form>
    Dernière modification par Bovino ; 15/11/2013 à 15h12. Motif: Merci d'indiquer le langage utilisé ([code=xxx]) pour activer la coloration syntaxique !

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    url : "/DMIST/validerConnexionAjax.action",
    Heu... tu es sûr que c'est une URL valide ça ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Invité
    Invité(e)
    Par défaut
    Oui celle-ci est valide car quand je l'exécute manuellement, j'ai bien ce que j'attends dans le success.

    Après de nouveaux tests en utilsant directement le onclick au niveau du bouton submit :

    si le submit est comme cela
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
     <s:submit id="monsubmit" value="%{getText('btn.label.login')}" onclick="johannjs();return false" />
    la fonction johannjs() s'exécute correctement. (/DMIST/validerConnexionAjax.action sort en succès)
    Par contre, le formulaire n'est pas submitté car l'action du formulaire n'est pas appelée. (pas d'appel à /DMIST/validerConnexion.action)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <s:submit id="monsubmit" value="%{getText('btn.label.login')}" onclick="johannjs();return true" />
    ou
    <s:submit id="monsubmit" value="%{getText('btn.label.login')}" onclick="johannjs();" />
    la fonction ajax sort en erreur car j'ai "l'alert" qui s'affiche
    Suite au clic sur ce popup, le formulaire est bien submitté au travers de l'action par défaut de celui-ci.


    Je ne vois donc pas comment je peux au moment de la validation de mon formulaire :
    exécuter mon johannjs() qui lance une fonction ajax (/DMIST/validerConnexionAjax.action) afin qu'elle s'exécute en arrière plan et raffraichisse l'écran avant le retour de l'action principale du formulaire.

    Cdt

  6. #6
    Invité
    Invité(e)
    Par défaut
    Pour votre information, je n'ai pas cette erreur sous IE.
    Mais ce que je souhaite faire doit fonctionner sous Firefox/Chrome.

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Je comprends rien à ce que tu veux faire...

    Bref, si tu veux d'abord exécuter ta requête AJAX et une fois que celle-ci a renvoyé la réponse, soumettre ton formulaire, tu peux au choix :
    • faire une requête synchrone ;
    • utiliser un input type button, lancer la requête au clic de celui-ci et dans le callback success, soumettre manuellement le formulaire.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  8. #8
    Invité
    Invité(e)
    Par défaut
    Lors de l'appui sur le bouton du formulaire, je souhaite que la fonction ajax se lance puis que l'action du formulaire s'exécute normalement (hors AJAX).

    Dans ma fonction AJAX (dans le success), je voulais rajouter un appel à setTimeout('johannjs()', 1000);
    afin que celle-ci s'exécute en boucle tant que le traitement de l'action du formulaire est en cours.

    Le but est de rafraichir mon écran avec le formulaire afin d'indiquer à l'utilisateur où en est le traitement proncipal.


    Aurais-tu un exemple pour ta dernière réponse?

Discussions similaires

  1. actualiser une Div par ajax lors d'un changement coté serveur
    Par dajij dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 19/08/2008, 18h17
  2. Afficher un message d'attente lors d'un submit
    Par lodan dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 30/04/2008, 15h01
  3. Réponses: 2
    Dernier message: 22/11/2007, 02h23
  4. vérification lors d'1 submit
    Par zimotep dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 21/08/2006, 11h07
  5. [FORM] ne pas envoyer tout lors d'un submit
    Par pmartin8 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 08/12/2005, 20h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo