requête AJAX avec jQuery

**omar24** · 05/04/2011, 16h30

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 :

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
 
<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 :

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

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:

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?

**erox44** · 05/04/2011, 17h24

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

**omar24** · 05/04/2011, 17h36

c'est fait mais en vain?

Code :

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

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!!!

**ABCIWEB** · 05/04/2011, 20h11

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

Code :

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

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

et tu n'auras plus ces notices.

**ABCIWEB** · 05/04/2011, 20h21

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 :

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

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

**danielhagnoul** · 05/04/2011, 20h32

Bonsoir

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

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
		$(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 :

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

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
	});
});

**ABCIWEB** · 05/04/2011, 21h30

@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

...

**omar24** · 06/04/2011, 09h57

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

requête AJAX avec jQuery

jQuery

Discussions similaires

Partager

Partager