Affichage avec jQuery

Version imprimable

Bonjour

Dans mon Head j'ai placé ce code :
Code:

1 2 3 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script> <link rel="stylesheet" href="css/humanity/jquery-ui-1.10.0.custom.css" />
Quand je teste, cela n'est pas pris en compte, j'ai un affichage classique html
dans mon appli j'ai bien les répertoires js et css

Pouvez-vous me dire pourquoi
Merci pour vos réponses

14/02/2013, 16h30
SpaceFrog

Beaucoup de raison possibles

paths incorrects
html incorrect
class incorrect
14/02/2013, 16h41
Vanessa48

Comment je peux le savoir ?
14/02/2013, 16h45
SpaceFrog

en explorant chacune des possibiltés

s'assurer que jquery est chargé
s'assurrer que ui est chargé
14/02/2013, 16h45
Bovino

Déjà, ta version de jQuery n'est pas compatible avec celle de UI... :roll:
D'ailleurs, pourquoi utiliser une version obsolète ? :koi:

J'ai remplacé le code précédent par

Code:

1
2
3
4
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>
<link rel="stylesheet" href="css/humanity/jquery-ui-1.10.0.custom.css" />

J'ai toujours le meme problème

14/02/2013, 17h24
Bovino

Oui mais là, tu montres juste l'intégration des scripts et des styles dans la page, mais les styles ne sont appliqués que lors d'utilisation de widgets, comment tu les intègre dans ta page ?
14/02/2013, 17h24
SpaceFrog

celà ne nous dit toujours pas où tu en est de tes vérifications de chargement
si tu as firefox regarde dans l'onglet reseau de la console de firefox voir si les fichiers externes sont chargés, si il le sont c'est que le souci est dans l'initialisation des effets ui
14/02/2013, 17h50
Vanessa48

Pour chaque ligne j'ai : HTTP/1.1 404 Not Found
14/02/2013, 17h53
SpaceFrog

et donc tu en conclus ....
14/02/2013, 17h57
Vanessa48

que les fichiers ne sont pas chargés ?
14/02/2013, 18h08
SpaceFrog

en effet et poru quelle raison ne sont ils pas chargés ??

les paths ne sont pas bons ...
14/02/2013, 18h13
Vanessa48

Je ne vois vraiment pas
15/02/2013, 14h42
SpaceFrog

Je répète :

Citation:

les paths ne sont pas bons ...

Il n'y a aucun piège ...
15/02/2013, 16h05
nico.mrgreen
Bonjour

Ton code source précise :
Code:

1 2 <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script> <link rel="stylesheet" href="css/humanity/jquery-ui-1.10.0.custom.css" />
Met l'adresse absolue (complète, commençant par http://) afin d'éviter les erreurs de chargement de tes deux fichiers.
15/02/2013, 16h08
SpaceFrog

8O8O

Citation:

Met l'adresse absolue (complète, commençant par http://) afin d'éviter les erreurs de chargement de tes deux fichiers.

ça ne risque pas de résoudre le problème, si le chemin relatif vers les fichiers ne sont pas corrects !!!
15/02/2013, 17h10
nico.mrgreen

Citation:

Envoyé par SpaceFrog

8O8O

ça ne risque pas de résoudre le problème, si le chemin relatif vers les fichiers ne sont pas corrects !!!

Sauf si les fichiers sont placés dans le bon répertoire, mais pas le fichier HTML.

Si son document HTML est dans www.monsite.com/blabla/ et ses fichiers CSS et JS dans www.monsite.com/js/ et www.monsite.com/css/ bin mon raisonnement est bon... tout simplement :ccool: Mais vu qu'on n'a pas son arborescence c'est un peu compliqué :D
15/02/2013, 17h27
SpaceFrog

cela dépend en effet entièrement de l'arborescence.

Le souci est juste de mettre le bon chemin relatif vers les fichiers sources.
Mettre un chemin absolu n'est pas la solution.
Je ne vois pas de cas de figure ou un chemin absolu remplacerait avantageusement un chemin relatif si ce n'est que le serveur interdirait un accès au loacal host ....
19/02/2013, 15h57
Vanessa48

Bonjour

Ma page formulaire.php est dans www.monsite.com/ et mes fichiers CSS et JS dans www.monsite.com/js/ et www.monsite.com/css/
20/02/2013, 00h01
danielhagnoul

Bonsoir

Dans le message n° 1, vous nous dites : "Quand je teste, cela n'est pas pris en compte, j'ai un affichage classique html".

Vous ne nous montrez jamais votre code HTML et JS.

Si vous chargez jQuery UI sans utiliser aucun de ses widgets ou sans appliquer un de ces styles à votre contenu HTML, c'est normal !

Bonjour

Voici mon code :

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
52
53
54
55
56
<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
<meta charset="Cp1252">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>
<link rel="stylesheet" href="css/humanity/jquery-ui-1.10.0.custom.css" />
 
<script type="text/javascript">
$(document.ready)(function(){
	function add_user(titre,ville){
		$.ajax({
			type:"POST";
			url:"add_user.php";
			data:"titre="+titre+"&ville="+ville,
			error:function(){
				alert("Erreur");
			},
			success:function(){
				alert("Enregistrement effectué");
			}
		});
	}
 
	$("#form").dialog({
		autoOpen:false,
		height:500,
		width:400,
		modal:true
		buttons:{
			Valider:function(){
				add_user($('#titre').val(),$('#ville').val());
				$(this).dialog("close");
			}
		}
	});
});
</script>
</head>
<body>
<div id="form">
<form action="form_ins.php" method="post" action="dialog html">
	<label for="titre">Titre :</label>
    			<input type="text" id="titre" name="titre"/>
 
    			<label for="ville">Ville :</label>
    			<input type="text" id="ville" name="ville"/>
 
				<input type="submit" name="enregistrer" value="Enregistrer" />
 
</form>
</div>
 
</body>
</html>

20/02/2013, 08h45
Bovino

Code:

$(document.ready)

:roll:

C'est nouveau ça...
:fleche: Qu'est-ce que la notion de Ready ?...
20/02/2013, 14h47
Vanessa48

Non j'ai trouvé celadans un tutoriel Javascript.
C'est pour attendre que la form soit chargée pour agir dessus (avant d'éxécuter le javascript)
C'est pas bon ?
20/02/2013, 14h58
Bovino

Ca m'étonnerais fortement qu'un quelconque tuto indique cette syntaxe.
Toujours est-il que le lien que j'ai donné répond clairement à la question.

Bonjour,

Non ce n'est pas bon. Ce qui est bon c'est :
Code:

1 2 3 4 5 6 $(document).ready(function() { // Ici tu executes la/les fonction nécessaire. // Par exemple check_formulaire(); });

Effectivement, j'ai fait une erreur en copiant le code
Apres avoir modififiée comme ceci :

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
<script type="text/javascript">
$(document).ready(function(){
	function add_user(titre,ville){
		$.ajax({
			type:"POST";
			url:"add_user.php";
			data:"titre="+titre+"&ville="+ville,
			error:function(){
				alert("Erreur");
			},
			success:function(){
				alert("Enregistrement effectué");
			}
		});
	}
 
	$("#form").dialog({
		autoOpen:false,
		height:500,
		width:400,
		modal:true
		buttons:{
			Valider:function(){
				add_user($('#titre').val(),$('#ville').val());
				$(this).dialog("close");
			}
		}
	});
});

</script>
Je lance l'appli et j'ai un affichage classique html
et pourtant les fichiers sont bien chargés
Je n'y comprends plus rien, de quoi cela provient-il

Lorsque ton document est chargé

Code:

$(document).ready

Tu cree un fonction add_user, mais cette fonction peut etre cree avant, ce qu'il faut, c'est que tu la lance lorsque ton document est chargé.

Par exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Je cree la fonction add_user function add_user = function(titre, ville) { // Ici je met les actions qu'effectue ma fonction } // A present je lance ma fonction add_user("moi", "la ou je suis"); //Mais si je veux lancer ma fonction uniquement lorsque la page est charge, je ne dois pas faire comme ci dessus, mais faire : $(document).ready(function() { add_user("moi", "la ou je suis"); }

20/02/2013, 17h00
Vanessa48
Si je remplace mon code par:
Code:

1 2 3 4 $(document).ready(function() { add_user("moi", "la ou je suis"); }
quand je lance l'appli cela devrait m'afficher : moi, la ou je suis

Si oui, cela ne me l'affiche pas
20/02/2013, 17h12
Vanessa48
Si je revois le tuto, avec ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script type="text/javascript"> $(document).ready(function(){ $("#form").dialog({ autoOpen:false, height:360, width:300, modal:true }); }); </script>
Quand il teste l'appli la boite de dialogue s'affiche
Et moi avec le meme code elle ne s'affiche pas
je vois vraiment pas pourquoi
20/02/2013, 17h25
Bovino

Si j'en crois le code de ton premier message, il n'y a aucun élément dans ta page avec l'id "form"... :roll:

Il serait peut-être bon de commencer par les bases avant de vouloir s'attaquer à UI...
20/02/2013, 17h33
SpaceFrog

Code:

autoOpen:false,

soit ...
mais tu l'ouvres où ?
20/02/2013, 17h44
Vanessa48

Excuse moi cette ligne est supprimée, mais qu'elle soit à true ne change rien
20/02/2013, 17h49
Bovino

Citation:

Envoyé par Bovino

il n'y a aucun élément dans ta page avec l'id "form"... :roll:

Re-:roll:

Si :

Code:

1
2
3
4
5
6
7
8
9
<div id="form">
<form action="form_ins.php" method="post" action="dialog html">
<label for="titre">Titre :</label>
<input type="text" id="titre" name="titre"/>
<label for="ville">Ville :</label>
<input type="text" id="ville" name="ville"/>
 <input type="submit" name="enregistrer" value="Enregistrer" />
</form>
</div>

20/02/2013, 18h29
Bovino

Arf... :oops:

Bon... ben j'ai plus qu'à aller me cacher de honte alors... :aie:
20/02/2013, 18h33
Vanessa48

Non car faut dire que j'alimente le débat
Mais je ne sais plus quoi faire car sur le tuto ca fonctionne et j'ai repris txto le code
c'est une vrai galère
21/02/2013, 19h35
tepaze

Bonsoir,

Je pense qu'avant de reprendre un tuto sans vraiment le comprendre, tu aurais tout intérêt à lire les cours, du moins les premiers, sur javascript qui sont proposés sur ce site par exemple. Ainsi tu comprendrais l'utilisation des fonctions, ce qui te faciliterait grandement la vie...
Les bases de JS ne sont pas vraiment compliquées, et elle sont quasi commune à tous les langage...
25/02/2013, 09h23
Vanessa48

Bonjour

Je les ai lues, néanmoins je ne trouve pas le problème