Ma fontion ne renvoie rien

Résolu
RateauMix
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017
- 31 déc. 2014 à 13:14
RateauMix
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017
- 31 déc. 2014 à 16:47
Bonjour,
J'ai commencé le Javascript et je m'attaque à la méthode AJAX, mais j'ai un problème avec "$.post" : elle ne me renvoie rien. Mon code est celui-ci :

$(document).ready(function(){
     
    $("#form form").submit(function(){
        var action      = $(this).attr('action');
        var nom         = $('#nom').val();
         
 
        $(".messages").slideUp('800', function(){
 
             
            $.post(  action, {
                nom         : nom
 
            }, function(data){
                $alert('OOO');
                $(".messages").html(data);
                $(".messages").slideDown('slow');
                 
            });
        });
         
         
        return false;
    });
     
     
});


Et mon code HTML :
<html>
 <head>
 <title>TestCCM</title>
 <link rel="stylesheet" type="text/css" href="test.css">
 </head>
 
          <body>
<div id="form">
 
    <div class="messages">
         
     
    </div>
     
    <form action="inscription_2.php" method="post">
     
    <p>
        <label for="nom">Nom</label>
        <input type="text" name="nom" id="nom">
    </p>
     
    <p>
        <input type="submit" value="Envoyer">
    </p>
    </form>
 
</div>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
                <script src="inscription_2.js"></script>
          </body>         
</html>




Un message devrait apparaître (d'une page php que j'ai créé) comme dans ce tutoriel

https://www.youtube.com/watch?v=vYXTt2lKCV8#t=588 mais rien ne se passe.

Si quelqu'un peu me dire où est l'erreur. Merci.

8 réponses

jordane45
Messages postés
35765
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 juin 2022
358
31 déc. 2014 à 13:36
Bonjour,

Perso.. pour l'AJAX je préfère la syntaxe suivante :

(document).ready(function(){
     
  $("#form form").submit(function(){
     var action      = $(this).attr('action');
     var nom         = $('#nom').val();
     $(".messages").slideUp('800', function(){
       $.ajax({
            url : action ,
            data : "?nom="+nom,
            type : 'POST',
            dataType : 'html',
            success : function(reponse){ 
                   alert(reponse);
            },
            error : function(resultat, statut, erreur){
              alert(erreur + " - " + resultat);
            }
      });
  });         
});


Ensuite....
Si tu ne l'as pas déjà fait .. installe le plugin FireBug ( pour FireFox), lance le .. et regarde ce qu'il t'affiche dans la console lorsque tu valides ton formulaire....
Cela pourra te permettre de trouver d'où vient le PB ( erreur de syntaxe dans ton script.. ou mauvaises variables passées...)



0
RateauMix
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

Modifié par RateauMix le 31/12/2014 à 14:41
Salut,
Merci pour la réponse, ton code fonctionne mais FireBug ne me dit pas qu'il y a une erreur pour le mien... Je vais travailler avec le tien.
0
jordane45
Messages postés
35765
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 juin 2022
358
31 déc. 2014 à 14:46
Que t'affiche la console ?
Tu devrais voir apparaitre une ligne de ce genre :



Si tu la déplies (en cliquant sur le + ) :


Tu verras ce que donnes les paramètres ...
Et tu peux aller dans l'onglet "Réponse" ou "Html" pour savoir ce qu'elle a retourné.



Mais bon.. si mon code ne t'affiche rien du tout.. même pas les alert d'erreur.. c'est que ton script ne se déclenche pas....

Ajoute des ALERT dans ton code pour savoir si on rentre bien dedans :
Par exemple :

(document).ready(function(){
     
  $("#form form").submit(function(){
   alert("Submit du formulaire !");
     var action      = $(this).attr('action');
     var nom         = $('#nom').val();
     $(".messages").slideUp('800', function(){
       alert("slideUp fini");
       $.ajax({
            url : action ,
            data : "?nom="+nom,
            type : 'POST',
            dataType : 'html',
            success : function(reponse){ 
                   alert(reponse);
            },
            error : function(resultat, statut, erreur){
              alert(erreur + " - " + resultat);
            }
      });
  });         
});


Si tu n'as toujours pas d'alert .. c'est que ça vient de la méthode d'appel de ta fonction.
Perso.. je ne fais JAMAIS de javascript sur un SUBMIT !
(le submit..étant l'envoie en PHP de ton formulaire.. pas sûr qu'il déclenche l' event javascript !)

A la limite.. remplaces ton bouton submit..
  <input type="submit" value="Envoyer">

par un bouton normal
  <input type="button" id="valider" value="Envoyer">


Et modifie l'appel à ta fonction par :
  $("#valider").click(function(){





0
RateauMix
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

31 déc. 2014 à 14:57
La console ne m'affiche rien du tout du tout,
quand j'utilise ton code, il m'affiche une partie du contenu de mon php (qui est
<?php 
	echo "<div class=\"error\">Veuillez remplir le formulaire</div>";
?>
) , il m'affiche : Veuillez remplir le formulaire"; ?>
0
jordane45
Messages postés
35765
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 juin 2022
358
31 déc. 2014 à 15:00
Tu as fais TOUTES les modifs dont je t'ai parlé ???
Les alertes... l'utilisation du bouton normal au lieu du submit ???

Montre ton code ainsi modifié !
0
RateauMix
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

31 déc. 2014 à 15:06
Ça donne ça pour le JS (j'ai aussi fait la modif. "button" + "id="valider"" dans le HTML) :
$(document).ready(function(){
	
	$("#valider").click(function(){
		var action 		= $("#form form").attr('action');
		var nom 		= $('#nom').val();

		$(".messages").slideUp('800', function(){
			
			$('#valider').hide().after('<img src="chargement.gif" class = "chargement">');
			
		       $.ajax({
		            url : action ,
		            data : "?nom="+nom,
		            type : 'POST',
		            dataType : 'html',
		            success : function(reponse){ 
		            	$(".messages").html(reponse);
						$(".messages").slideDown('slow');
						$(".chargement").fadeOut();
						$('#valider').fadeIn();
		            },
		            error : function(resultat, statut, erreur){
		              alert(erreur + " - " + resultat);
		            }
		      });
		  });         
		
		
		return false;
	});
	
	
});
0
jordane45
Messages postés
35765
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 juin 2022
358
31 déc. 2014 à 15:09
Il manque les ALERT que j'avais ajouté un peu partout...

Essayes ça :
$(document).ready(function(){
	
	$("#valider").click(function(){
           alert("J'ai cliqué sur le bouton !");
		var action 		= $("#form form").attr('action');
		var nom 		= $('#nom').val();

		$(".messages").slideUp('800', function(){
			alert("slideup terminé !");
			$('#valider').hide().after('<img src="chargement.gif" class = "chargement">');
			
		       $.ajax({
		            url : action ,
		            data : "?nom="+nom,
		            type : 'POST',
		            dataType : 'html',
		            success : function(reponse){ 
                               alert("reponse");
		            	$(".messages").html(reponse);
						$(".messages").slideDown('slow');
						$(".chargement").fadeOut();
						$('#valider').fadeIn();
		            },
		            error : function(resultat, statut, erreur){
		              alert(erreur + " - " + resultat);
		            }
		      });
		  });         
		
		
		return false;
	});
	
	
});
0
RateauMix
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

31 déc. 2014 à 15:21
Je viens d'ajouter les "alert()" et ils fonctionnent tous
0
jordane45
Messages postés
35765
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 juin 2022
358
31 déc. 2014 à 15:24
Même le "réponse" ??
Donc c'est tout bon alors.....

donc si cette ligne
$(".messages").html(reponse);
ne fonctionne pas.. c'est que tu as un souci dans ton script PHP et non plus dans ton javascript...
Fais voir le code te ta page PHP
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
jordane45
Messages postés
35765
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 juin 2022
358
31 déc. 2014 à 15:39
Tu as un "?>" en trop visiblement...
N'en aurais tu pas mis deux dans ton fichier PHP ??
Supprimes tout son contenu ( via un CTRL+A puis SUPPR ) puis recolle juste ton code :
<?php 

  echo "<div class=\"error\">Veuillez remplir le formulaire</div>";

?>


Et pour FireBug.. regarde ce que dit la CONSOLE...( tu sais... les captures écran que je t'ai mis tout à l'heure.....)
Pour la faire afficher .. clique sur l'icone en haut à droite du navigateur :

0
RateauMix
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

31 déc. 2014 à 15:48
J'ai copié-collé et rien de nouveau. Voilà ca que m'affiche la console :
0
RateauMix
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

31 déc. 2014 à 16:09
Pour le PHP peut être qu'il s'agit du fait que je n'ai pas WAMPP ?
0
jordane45
Messages postés
35765
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 juin 2022
358
31 déc. 2014 à 16:12
bizarre....

Essayes ça ( remplace tout ton fichier html)


   <div id="form"> 
    <div class="messages">     
    </div>
    
    <form action="inscription_2.php">
    <p>
        <label for="nom">Nom</label>
        <input type="text" name="nom" id="nom">
    </p>    
    <p>
      <input type="button" id="valider" value="Envoyer">
    </p>
    </form>

<script type="text/javascript">
$(document).ready(function(){
	console.log ("************ Document READY ************");
	$("#valider").click(function(){
           console.log("J'ai cliqué sur le bouton !");
		var action = $("#form form").attr('action');
		var nom 	= $('#nom').val();

		$(".messages").slideUp('800', function(){
			console.log("slideup terminé !");
			$('#valider').hide().after('<img src="chargement.gif" class = "chargement">');
			
		       $.ajax({
		            url : action ,
		            data : "?nom="+nom,
		            type : 'POST',
		            dataType : 'html',
		            success : function(reponse){ 
                               console.log ("reponse");
		            	$(".messages").html(reponse);
				$(".messages").slideDown('slow');
				$(".chargement").fadeOut();
				$('#valider').fadeIn();
		            },
		            error : function(resultat, statut, erreur){
		              alert(erreur + " - " + resultat);
		            }
		      }); // Fin AJAX
		 }); // Fin SlideUp         
	}); // Fin  click	
// Fin document ready	
});
</script>



Cette fois.. tu devrais avoir des choses dans ta console FireBug....
Sinon.. je ne vois pas.... et il faudra alors que tu me donnes TOUT le code de ta page HTML (ta première page..avec l'import de jquery....)
0
jordane45
Messages postés
35765
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 juin 2022
358
31 déc. 2014 à 16:13
Regardes aussi quelles options sont activées dans ton fireBug.
Il te faut au minimum celles là :


0
RateauMix
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

Modifié par RateauMix le 31/12/2014 à 16:19
Là je viens de tout activer et j'ai
0
jordane45
Messages postés
35765
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 juin 2022
358
31 déc. 2014 à 16:20
Ben tu as plein d'erreurs de code javascript ....
Il te faut d'abord les corriger....(dans ton fichier javascript.js .. inspector.js....)
par contre ne coche pas TOUT .. ne coche que les mêmes que moi.
0
RateauMix
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

31 déc. 2014 à 16:21
Et là d'autres erreur rouges viennent de se rajouter.
0
jordane45
Messages postés
35765
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 juin 2022
358 > RateauMix
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

31 déc. 2014 à 16:22
il n'y a que les ROUGES qui comptent vraiment (comme erreurs...)
Donc .. coche uniquement les même options que moi..
regarde ce que ça donne..
Si tu as encore des erreurs ( lignes rouge..) corrige les...
0
RateauMix
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

31 déc. 2014 à 16:23
Ok, je vais faire ça.
0
RateauMix
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

Modifié par RateauMix le 31/12/2014 à 16:30
Il ne me met que : "aucun élément trouvé ?> ---> inscription_2.php (ligne 4, col. 3)"
0