Ajax et Post pour fichier .php

Version imprimable

Bonjour,

Cela fait plusieurs jours (je peux même parler en semaine je crois) que je bloque sur un formulaire en ajax.

Le formulaire est présent dans une page qui elle même est appelée en ajax, je ne peux donc pas utiliser un code du type ci dessous :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
    $("#form_video").submit(function(){
        $.ajax({type:"POST", data: $(this).serialize(), url:"inc/ajout_video.php",
            success: function(data){
                $("div#ajout_video").html(data);
            },
                        error: function(){
                    $("div#ajout_video").html('Une erreur est survenue.');
            }
        });
        return false;
    });
});

Du coup j'ai modifié mon formulaire de la façon suivante :

Code:

1
2
3
4
5
6
7
<form id="form_video" method="post">
<p>Je propose une vidéo pour ce spot (copier/coller l'URL de Youtube, Viméo, Zapiks ou Dailymotion) :<br><span class="remarque">Exemple : https://www.youtube.com/watch?v=9RHS68rspb0</span></p>
 
<input type="text" name="lien_video" id="lien_video" size="38" maxlength="200" />
<input type="hidden" name="id_circuit" id="id_circuit" value="<?php echo $id_circuit; ?>" />
<input type="submit" value="Proposer" onclick="ajout_video()" class="button" />
</form>

Mon script ajax :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function ajout_video() {
 
        $.ajax({
            type: "POST",
            url: "inc/ajout_video.php",
            data: {
                lien_video : $("#lien_video").val(),
                            id_circuit : $("#id_circuit").val()
            },
            success: function(data){
                $("div#ajout_video").html("<div class='zone_ok'>Merci pour ta participation, la vidéo sera vérifiée au plus vite.</div>");
            },
            error: function(){
                $("div#ajout_video").html("<div class='zone_erreur'>Erreur !<br />Soit le champs est vide, soit le lien est mauvais.</div>");
            }
        })
 
        .done(function( msg ) {
            alert( "Data Saved: " + msg );
        });
 
     return false; // ne change pas de page
}

Et le fichier tout bête de .php que je modifierai par la suite :

Code:

1
2
3
4
5
6
7
8
9
$lien_video = $_POST['lien_video'];
$id_circuit = $_POST['id_circuit'];
 
if( isset($lien_video) && isset($id_circuit) && $lien_video == 12){
     echo "Success if";
}
else{
     echo "Error";
}

Deux erreurs :

Quoi que j'écrive dans lien_video, je me retrouve toujours avec le message : Merci pour ta participation, la vidéo sera vérifiée au plus vite. Même si j'écris autre chose que "12" dans le champs en question ? Et pourtant en msg alert j'ai Error qui s'affiche !?

Deuxième problème, la page se recharge quoi qu'il se passe !?
J'ai pourtant bien ajouté : return false; et sur mes 10000 tests j'avais aussi utilisé preventDefault(); mais apparement pas de la bonne façon.

J'ai plus de cheveux, j'ai mon écran fissuré et je suis prêt a sauter de la fenêtre ... (du rdc) ... histoire de dire que je bloque vraiment ...

Si une âme charitable voit une solution, je suis preneur !

Un grand merci d'avance

08/09/2014, 08h41
Bovino

Citation:

Même si j'écris autre chose que "12" dans le champs en question ? Et pourtant en msg alert j'ai Error qui s'affiche !?

Ce n'est pas parce que ta requête renvoie "Error" qu'elle a échoué...
Au contraire, si tu reçois "Error", c'est bien que ta requête a renvoyé un résultat et donc qu'elle a réussi, il n'a a donc aucune raison de ne pas avoir le message indiqué dans success ! :aie:
08/09/2014, 19h23
squal31
Bonjour et merci pour cette remarque.
Mais alors pourquoi j'ai le même résultat lorsque je modifie le code suivant :
Code:

1 2 3 4 5 6 if( isset($lien_video) && isset($id_circuit) && $lien_video == 12){ echo "Success if"; } else{ //echo "Error"; }
Etant donné que le code php ne renvoi aucune valeur, je devrai avoir un retour d'erreur et donc l'affichage du message suivant :
Code:

1 2 error: function(){ $("div#ajout_video").html("<div class='zone_erreur'>Erreur !<br />Soit le champs est vide, soit le lien est mauvais.</div>");}
Et j'ai toujours la page qui se recharge ...
Je ne trouve pas la bonne utilisation de la fonction : preventDefault() et le code ci-dessous ne fonctionne pas ...
Code:

1 2 function ajout_video(e) { e.preventDefault();
Merci d'avance pour votre aide.
09/09/2014, 07h49
Bovino

Tu ne comprends pas ce que signifie qu'une requête a échoué...
La notion de succès ou d'échec n'a rien à voir avec ce que renvoie un script.
Si l'URL de ton script a pu être atteinte et qu'elle renvoie un code HTTP correspondant (typiquement 200), alors la requête est considérée comme réussie quel que soit le contenu renvoyé.
Si l'URL ne peut être atteinte et renvoie un code HTTP correspondant (typiquement 404), alors c'est un échec.

Et ça, c'est expliqué dans n'importe quel cours de débutant.

Pour ce qui est de preventDefault(), tu te rends bien compte qu'il s'agit d'une méthode de l'objet passé en paramètre (e dans ton code).
Or pour pouvoir utiliser l'objet passé en paramètre, la moindre des choses, c'est de transmettre un paramètre ! Toi, tu ne passes rien en paramètre : onclick="ajout_video()".

Merci pour les pistes. Du coup je viens de régler le souci, enfin !
Je poste les codes qui fonctionnent, si ça peut aider quelqu'un.

Ma fonction ajax :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function ajout_video() {
	$.ajax({
		type: "POST",
		url: "inc/ajout_video.php",
		data: {
			lien_video : $("#lien_video").val(),
			id_circuit : $("#id_circuit").val()
		},
		success: function(data){
			if(data == 'Success'){
				$("#ajout_remarque").html("<div class='zone_ok'>Merci pour ta participation, la vidéo sera vérifiée au plus vite.</div>");
			}
			else{
				$("#ajout_remarque").html("<div class='zone_erreur'>Erreur !<br />Soit le champs est vide, soit le lien est mauvais.</div>");
			}
		}
	}).done(function( msg ) {
		alert( "Data Saved: " + msg );
	});
	return false; // ne change pas de page
}

Et mon formulaire :

Code:

<input type="submit" value="Proposer" onclick="return ajout_video()" class="button" />