Ma fontion ne renvoie rien [Résolu]

Signaler
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017
-
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017
-
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

Messages postés
29754
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020
338
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...)



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

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.
Messages postés
29754
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020
338
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(){





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

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"; ?>
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

Je viens d'ajouter les "alert()" et ils fonctionnent tous
Messages postés
29754
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020
338
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
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

Mon PHP est juste
<?php 
	echo "<div class=\"error\">Veuillez remplir le formulaire</div>";
?>
Messages postés
29754
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020
338
Je ne comprend pas...
Ton code fonctionne non ?
Il t'affiche quoi dans ta div messages ??

Et dans fireBug.. tu as quoi ?
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

dans ma div message j'ai, d'après FireBug :
<div class="messages" style="display: block;">Veuillez remplir le formulaire"; ?></div>
Messages postés
29754
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020
338
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 :

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

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

Pour le PHP peut être qu'il s'agit du fait que je n'ai pas WAMPP ?
Messages postés
29754
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020
338
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....)
Messages postés
29754
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020
338
Regardes aussi quelles options sont activées dans ton fireBug.
Il te faut au minimum celles là :


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

Là je viens de tout activer et j'ai
Messages postés
29754
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020
338 >
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

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...
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

Ok, je vais faire ça.
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

Il ne me met que : "aucun élément trouvé ?> ---> inscription_2.php (ligne 4, col. 3)"
Messages postés
29754
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020
338
Il te marque ça où ?
Messages postés
74
Date d'inscription
dimanche 30 novembre 2014
Statut
Membre
Dernière intervention
29 novembre 2017

Ok, j'ai trouvé ! Il fallait télécharger WAMPP et ouvrir les fichiers avec... Désolé d'avoir été aussi long :/ Mais merci beaucoup ! :D