Problème requête Ajax

**kebab** · 30/06/2009, 11h05

Bonjour,

Voilà, j'utilise la méthode post en Ajax avec jQuery pour entrer les valeurs d'un formulaire dans la BDD. La fonction marche correctement, le seule problème c'est que je suis obligé de mettre une ligne de code pour que le code de la fonction success soit éxecuté.

Voilà la ligne que je dois ajouter (avant ou après la fonction post) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#formAlbum").html("Youpi");

(A noter que j'ai essayé avec d'autres id, avec d'autres fonctions comme css(), je suis obligé d'utiliser la fonction html pour que ça fonctionne)

Et voici le code de ma fonction :

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
 
function add_album(formulaire){
    var nom_album = formulaire.nom_album.value;
    var id_activite = formulaire.activite.options[formulaire.activite.selectedIndex].value;
 
    $("#formAlbum").html("Youpi");
 
    $.post("add_album.php", {nom: nom_album, id: id_activite},
    function success(data){
        if(data==1){
            $("#formAlbum").html("Album photo créé avec succès !");
            $("#formAlbum").css("text-align", "center");
            $("#uploadPhotos").slideDown("slow");
        }
        else {
            alert('Impossible de créer l\'album photo ! ');
        }
    });
 
}

En espérant que vous trouverez réponse à mon problème...

Merci d'avance !

**bigben89** · 30/06/2009, 12h36

Ce n'est pas ton youpi qui peut changer quoi que ce soit à la requête ajax.
Le problème doit venir d'autre part.
Quand tu dis que ton success ne marche pas, c'est que tu ne vois pas de changement dans ta page ou que la fonction n'est carrément pas appelée ?

**kebab** · 30/06/2009, 12h42

Ben la requête est éxécutée, mais le code javascript (jQuery) à l'intérieur de la fonction success ne l'est pas...

**bigben89** · 30/06/2009, 14h43

Bizarre.
A partir du moment où ta requête ajax se passe bien, la fonction de callback est forcément sensée être appelée.
Es-tu sûr que ta requête ajax est bien lancée? Si oui, quelle valeur retourne-t'elle ?

**kebab** · 30/06/2009, 15h57

Oui je suis sur puisque ce sont des valeurs que j'enregistre dans ma BDD. Tout se passe sans problème.

Voilà le code de mon script PHP :

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
 
<?php 
mysql_connect("****", "****", "****");
mysql_select_db("*****");
 
$query_insertAlbum = 'INSERT INTO album VALUES ("", "'.$_POST['nom'].'", '.$_POST['id'].')';
 
if(mysql_query($query_insertAlbum)){
    
    $aId = mysql_insert_id();
    
    if(mkdir("images/albums/album_$aId")) {
        echo '1';
    }
    
    else {
        echo '0';
    }
    
}
 
else {  
    echo '0';
}
 
mysql_close();
 
?>

A noter que j'ai changé les conditions sur a valeur data du fichier .js. Je teste si la valeur est égale à 1 ou non...

**bigben89** · 30/06/2009, 16h27

Si ta requête se passe bien, quelle valeur récupères-tu dans ta fonction de callback ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function success(data){
    alert(data);
    // ...
}

Sinon, ça pourrait être utile d'avoir le code html concerné par tes modifs. Ca peut toujours servir, au cas où.

**danielhagnoul** · 30/06/2009, 17h26

Bonjour.

Point-virgule inutile !
Essayer de nouveau après l'avoir enlevé.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
if(data!=-1){;

**kebab** · 30/06/2009, 17h29

Donc data vaut bien 1.

Et voilà le code HTML concerné (désolé c'est un peu long

) :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<div class="form">
	<div id="formAlbum">
	<form class="cmxform" id="albumForm" method="post" action="index.php?p=calbum"  onsubmit="add_album(this);">
		<fieldset>
			<p>
				<label for="nom_album">Nom de l'album (requis)</label>
				<input id="nom_album" name="nom_album" class="required" minlength="2" />
			</p>
			<p>
			    <label for="activite">Activité</label>
			    <select name="activite">
				<?php
                                    while($activityCb = mysql_fetch_array($query_activityCb)){
                                        echo '<option value="'.$activityCb['id_activite'].'">';
                                        echo $activityCb['libelle_activite'].'</option>';
                                    }
                                ?>
			    <option value="0">CLSH</option>
			    </select>
			</p>
			<p>
				<input class="submit" type="submit" value="Valider"/>
			</p>
		</fieldset>
	</form>
	</div>
</div>
 
<div id="uploadPhotos">
 
<h3 class="titleHome">Ajouter des photos à l'album</h3>
<div class="titleLine"></div>
	<div class="form">		  
		<input type="file" name="fileInput" id="fileInput" />
		<script type="text/javascript">
 
		$(document).ready(function() {
		$('#fileInput').fileUpload ({
		'uploader'  : 'flash/uploader.swf',
		'script'    : 'upload.php',
		'cancelImg' : 'images/cancel.png',
		'auto'      : false,
		'multi'		: true,
		'folder'    : '/Site/images/albums/album_<?php echo $lastAlbum['id_album + 1']; ?>',
		'fileDesc': 'Image Files',
		'fileExt': '*.jpg;*.jpeg;*.gif;*.png;*.bmp;*.flv;',
		'buttonText': 'Parcourir',
 
		});
		});
		</script>
 
		<input class="submit" type="button" value="Valider" onclick="javascript:$('#fileInput').fileUploadStart();"/>
	</div>
</div>

Merci beaucoup pour ton aide...

EDIT : J'avais remarqué le point virgule après avoir posté mon message sur le forum tout à l'heure Daniel, je l'ai donc enlevé et ça n'a rien changé...

**danielhagnoul** · 30/06/2009, 18h30

Bonsoir.

Essayer ce code et donner le résultat svp :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
$.post("add_album.php", {nom: nom_album, id: id_activite},
	function(data){
		console.log(data);
	}
);

C'est function(data) il n'y a pas de success ici.

**kebab** · 30/06/2009, 19h27

La console affiche 1...

**danielhagnoul** · 30/06/2009, 19h59

Bonsoir.

Le php et function(data) sont donc OK.
Reste à remettre votre code à la place du console.log() et à toucher du bois !

**kebab** · 30/06/2009, 20h12

Malheureusement j'ai essayé, sans succès.

J'ai l'impression que c'est le code spécifique à JQuery qui ne veut pas fonctionnait dans function(data), puisqu'un alert() ou même un console.log() marche très bien...

**danielhagnoul** · 30/06/2009, 20h42

Bonsoir.

Mon code de debug marche bien, le voici :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
	</style>
	<!-- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> -->
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		function add_album(formulaire){
			var nom_album = formulaire.nom_album.value;
			var id_activite = formulaire.activite.options[formulaire.activite.selectedIndex].value;
 
			//debug
			var data = 1;
 
			if (data == 1){
				$("#formAlbum").html("Album photo créé avec succès !");
				$("#formAlbum").css("text-align", "center");
				$("#uploadPhotos").slideDown("slow");
			} else {
				alert('Impossible de créer l\'album photo ! ');
			}
		}
	</script>
</head>
<body>
	<div id="conteneur">
 
	<div class="form">
		<div id="formAlbum">
			<form class="cmxform" id="albumForm" method="post" action="index.php?p=calbum"  onsubmit="add_album(this);">
				<fieldset>
					<p>
						<label for="nom_album">Nom de l'album (requis)</label>
						<input id="nom_album" name="nom_album" class="required" minlength="2" />
					</p>
					<p>
						<label for="activite">Activité</label>
						<select name="activite">
							<!-- debug
							<?php
                                                                while($activityCb = mysql_fetch_array($query_activityCb)){
                                                                echo '<option value="'.$activityCb['id_activite'].'">';
                                                                echo $activityCb['libelle_activite'].'</option>';
                                                                }
                                                        ?>
							-->
							<option value="0">CLSH</option>
						</select>
					</p>
					<p>
						<input class="submit" type="submit" value="Valider"/>
					</p>
				</fieldset>
			</form>
		</div>
	</div>
	<div id="uploadPhotos">
		<h3 class="titleHome">Ajouter des photos à l'album</h3>
		<div class="titleLine"></div>
			<div class="form">		  
				<input type="file" name="fileInput" id="fileInput" /> 
				<script type="text/javascript">
					 $(document).ready(function(){
					 /* debug
 
						$('#fileInput').fileUpload ({
							uploader: 'flash/uploader.swf',
							script: 'upload.php',
							cancelImg: 'images/cancel.png',
							auto: false,
							multi: true,
							folder: '/Site/images/albums/album_<?php echo $lastAlbum['id_album + 1']; ?>',
							fileDesc: 'Image Files',
							fileExt: '*.jpg;*.jpeg;*.gif;*.png;*.bmp;*.flv;',
							buttonText: 'Parcourir' //, pas de virgule ici !
						});
					*/
					});
				</script>
 
				<input class="submit" type="button" value="Valider" />
				<!-- debug  onclick="javascript:$('#fileInput').fileUploadStart();" -->
			</div>
		</div>
	</div>
 
	</div>
</body>
</html>

Il y a une erreur ici, une virgule en trop :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
					 $(document).ready(function(){					  
						$('#fileInput').fileUpload ({
							uploader: 'flash/uploader.swf',
							script: 'upload.php',
							cancelImg: 'images/cancel.png',
							auto: false,
							multi: true,
							folder: '/Site/images/albums/album_<?php echo $lastAlbum['id_album + 1']; ?>',
							fileDesc: 'Image Files',
							fileExt: '*.jpg;*.jpeg;*.gif;*.png;*.bmp;*.flv;',
							buttonText: 'Parcourir' //, pas de virgule ici !
						});
					});

Il y a encore du code php, impossible a tester !

**kebab** · 30/06/2009, 21h05

C'est ultra bizarre, je viens de tester comme toi sans la fonction post() et ça marche !

J'y comprends vraiment rien, je vois pas ce qui ne va pas avec ma fonction post...

**bigben89** · 01/07/2009, 09h19

Je ne sais pas si c'est lié, mais à ta place, vu que tu appelles add_album dans le onsubmit du formulaire, je mettrais return false à la fin de la fonction add_album, et "return add_album(this)" dans le onsubmit, comme ça, tu évites le rechargement de la page.
Une fois cela fait, et après avoir supprimé le youpi inutile, ça marchait sans problème chez moi.

**kebab** · 01/07/2009, 09h57

Oh Big Ben, ça marche !!!!!!!!

Je ne sais pas comment te remercier mais en tout cas je suis vraiment bête de ne pas y avoir pensé...

Encore merci !

Problème requête Ajax

jQuery

Discussions similaires

Partager

Partager