requête AJAX avec jQuery [Résolu]

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:

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?

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.

05/04/2011, 17h24	#2
erox44 Membre habitué Développeur Web Inscription : avril 2007 Messages : 323 Détails du profil Informations personnelles : Sexe : Âge : 23 Localisation : France, Loire Atlantique (Pays de la Loire) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : avril 2007 Messages : 323 Points : 144 Points : 144	Yop, essayes de préciser le type de requete ajax "post/get" ? __________________ L'intelligence c'est comme la confiture, moins tu en as , plus tu l'étales...
	00

05/04/2011, 20h11	#4
ABCIWEB Membre Expert Inscription : septembre 2010 Messages : 1 242 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 1 242 Points : 1 564 Points : 1 564	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. __________________ - Réalisations - Interface graphique : génération en javascript d'objets défilants, texte et/ou images, mode horizontal ou vertical.
	00

05/04/2011, 21h30	#7
ABCIWEB Membre Expert Inscription : septembre 2010 Messages : 1 242 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 1 242 Points : 1 564 Points : 1 564	@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 ... __________________ - Réalisations - Interface graphique : génération en javascript d'objets défilants, texte et/ou images, mode horizontal ou vertical.
	00

06/04/2011, 09h57	#8
omar24 Membre habitué Omar Inscription : septembre 2010 Messages : 146 Détails du profil Informations personnelles : Nom : Omar Localisation : Maroc Informations professionnelles : Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2010 Messages : 146 Points : 125 Points : 125	Merci à tous, Un special merci à ABCIWEB ta réponse est bien ce que je cherchais.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email