requête AJAX avec jQuery

Version imprimable

Salut tout le monde,
Je veux créer un formulaire qui permet de générer un fichier CSS.
Voila mes codes:

index.php:

Code:

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
 
<html>
	<head>
		<title>Personnaliser votre thème</title>
		<script type="text/javascript" src="jquery-1.4.2.js"></script>
		<script type="text/javascript" src="jscolor/jscolor.js"></script>
		<script type="text/javascript">
 
 
 
		$().ready(function() {
			$("#save").bind('click', function() {
				var css,bgcol,photo,sizetext,textcol;
				 bgcol = "#"+$("#bgcol").val();
				 photo = $("#photo").val();
				 sizetext = $("#sizetext").val()+'em';
				 alert(sizetext);
				 textcol = "#"+$("#textcol").val();
				//css = "body{background-color:"+bgcol+";font-size:"+sizetext+";color:"+textcol+";background-image:url("+photo+");}";
				//alert(css);
 
					$.ajax({
						url : "css.php",
						data : "bgcol="+bgcol+"&sizetext="+sizetext+"&textcol="+textcol+"&photo="+photo,
						success : function(data) {
									if(data == 0)  {
										alert('ok');
									}
								}
					});
				//$("body").css('background-color',bgcol).css('font-size',sizetext).css('color',textcol).css('background-image','url('+photo+')');
			});
 
		});
 
		</script>
	</head>
<body>	
<table>
<tr><td>Couleur arriere-plan </td><td><input type="text" id="bgcol" class="color"/></td></tr>
<tr><td>Transfère le fichier </td><td>  <input type="file" id="photo" /></td></tr> 
<tr><td>Taille texte </td><td><input type="text" id="sizetext"/></td></tr>
<tr><td>Couleur texte </td><td><input type="text" id="textcol" class="color"/></td></tr>
<tr><td><input type="button" value="Appliquer" id="save"/></td><td></td></tr>
</table>
 
Bonjour tout le monde,
C'est un teste pour changer le style de a page. On essaye de donner un moyen aux utilisateurs de choisir le design qui leurs convient.
 
</body>
</html>

css.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
<?php
$bgcol = $_GET['bgcol'];
$sizetext = $_GET['sizetext'];
$textcol = $_GET['textcol'];
$photo = $_GET['photo'];
$css = "body{background-color:".$bgcol.";font-size:".$sizetext.";color:".$textcol.";background-image:url(".$photo.");}";
//echo $css;
$monfichier = fopen('style.css', 'r+');
fputs($monfichier, $css);
echo 0;
?>

ça me pose le problème suivant:

Citation:

br />
Notice: Undefined index: sizetext in C:\Program Files\Apache Group\Apache2\htdocs\roller\css.php on line 3 
 
Notice: Undefined index: textcol in C:\Program Files\Apache Group\Apache2\htdocs\roller\css.php on line 4 
 
Notice: Undefined index: photo in C:\Program Files\Apache Group\Apache2\htdocs\roller\css.php on line 5

pourquoi les valeurs ne sont pas envoyées au fichier css.php? je ne vois poa où est ma faute?

05/04/2011, 17h24
erox44

Yop,
essayes de préciser le type de requete ajax "post/get" ?

c'est fait mais en vain?

Code:

1
2
3
4
5
6
7
8
9
10
$.ajax({
						type : "GET",
						url : "css.php",
						data : "bgcol="+arg0+"&sizetext="+arg1+"&textcol="+arg2+"&photo="+arg3,
						success : function(data) {
									if(data == 0)  {
										alert('ok');
									}
								}
					});

le problème c'est que le même code dans d'autres situations fonctionne, ici je ne vois pas l'erreur!!!

05/04/2011, 20h11
ABCIWEB

Mais bon c'est des erreurs php...
Pour toutes tes variables $_GET (ou $_POST) fais plutôt :

Code:

$bgcol = isset($_GET['bgcol'])? $_GET['bgcol'] :'valeur par défaut' ;

et tu n'auras plus ces notices.
05/04/2011, 20h21
ABCIWEB
Ah oui, je viens de voir autre chose : c'est pas génial de faire passer un # dans une url.
Fais plutôt passer seulement la valeur bgcol = $("#bgcol").val(); dans l'url de la requête puis rajoute le # côté php.

css.php
Code:

1 2 $bgcol = isset($_GET['bgcol'])? '#'.$_GET['bgcol'] : #000; //etc.

Bonsoir

En affichant simplement le texte envoyé, je vois que l'URL du fichier n'est pas reprise.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
		$(function(){
 
			$("#save").bind('click', function() {
				var css,bgcol,photo,sizetext,textcol;
 
				bgcol = "#"+$("#bgcol").val();
				photo = $("#photo").val();
				sizetext = $("#sizetext").val()+'em';
				textcol = "#"+$("#textcol").val();
 
				// C:\Users\Daniel\Documents\Floribert Babaatubi\Cartes Perso\Floribert.vip
 
				console.log("bgcol="+bgcol+"&sizetext="+sizetext+"&textcol="+textcol+"&photo="+photo);
 
				// bgcol=#black&sizetext=213em&textcol=#white&photo=Floribert.vip
			});
		});

EDIT

En testant une version avec $.param() -- http://api.jquery.com/jQuery.param/, je vois qu'il remplace le caractère # par %23 !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
	$("#save").bind('click', function() {
		var css, tab = [
			{name:"bgcol", value:"#"+$("#bgcol").val()},
			{name:"sizetext", value:$("#sizetext").val()+"em"},
			{name:"textcol", value:"#"+$("#textcol").val()},
			{name:"photo", value:$("#photo").val()}
		];
 
		console.log($.param(tab));
 
		// bgcol=%23black&sizetext=213em&textcol=%23white&photo=Floribert.vip
	});
});

05/04/2011, 21h30
ABCIWEB

@danielhagnoul

Oui c'est pour éviter ce genre de bin's auquel j'ai déjà eu affaire par ailleurs que j'utilisais cette solution.

Cela dit il est vrai que je prend un peu la tangente :)...
06/04/2011, 09h57
omar24

Merci à tous,
Un special merci à ABCIWEB ta réponse est bien ce que je cherchais.