En-tête head qui empêche le bon fonctionnement d'un script jquery [Résolu]

beegees · 25/05/2011, 08h06

Bonjour à tous,

J'aimerais intégrer à certaines zones de texte un datepicker jquery UI.

Voici le code de mon head :

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
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document sans titre</title>
 
    <link rel="stylesheet" href="jquery/development-bundle/themes/ui-lightness/jquery.ui.accordion.css" />
    <link rel="stylesheet" href="jquery/development-bundle/themes/base/jquery.ui.accordion.css" />
 
    <link rel="stylesheet" href="jquery/css/ui-lightness/jquery-ui-1.8.13.custom.css" />
 
	<script type="text/javascript" src="js/jquery.js"></script> 
	<script type="text/javascript" src="AJAX/filtre.js"></script>
    <script type="text/javascript" src="AJAX/xhr.js"></script>
    <script type="text/javascript" src="Fonctions/trim.js"></script>
 
    <script type="text/javascript" src="AJAX/verifier_dmu.js"></script>
 
 
    <script type="text/javascript" src="js/jquery.js"></script> 
 
    <script type="text/javascript" src="jquery/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="jquery/js/jquery-ui-1.8.13.custom.min.js"></script>
	<script type="text/javascript" src="jquery/js/jquery.ui.datepicker.js"></script>
     <script type="text/javascript" src="jquery/development-bundle/ui/jquery.ui.core.js"></script>
    <script>
	$(document).ready(function(){ 
	$( "#datepicker" ).datepicker(); 
	}); 
	</script>
 
 
</head>

Le souci est que le plugin ne fonctionne pas si je laisse cette ligne :

Code :

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

<link rel="stylesheet" href="jquery/css/ui-lightness/jquery-ui-1.8.13.custom.css" />

Si je la retire, le calendrier s'affiche (sans css) mais le css de l'accordion n'apparaît alors plus.

Auriez-vous une idée pour résoudre ce problème ?

Un test peu être fait ici :

http://164.15.112.38/neuro/neuro/inputs.php

1) cliquer sur Date of birth, le calendrier n'apparaît pas
2) Introduire "d" dans "name" l'accordion apparaît

Je vous remercie d'avance pour votre aide.

beegees

llaffont · 25/05/2011, 09h50

Salut,

Je reviens de ton site et je n'ai aucun calendrier dans aucun des deux cas.
"d" affiche bien l’accordéon mais pas de calendrier visible sous "Date of birth"

Par contre si je rentre une valeur à la main dans le input, j'obtiens :

Code :

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

<b>Warning</b>:  mysql_num_rows() expects parameter 1 to be resource, boolean given in <b>C:\wamp\www\Neuro\Neuro\AJAX\filtre.php</b> on line <b>47</b>

beegees · 25/05/2011, 10h00

Citation:

Envoyé par llaffont

Salut,

Je reviens de ton site et je n'ai aucun calendrier dans aucun des deux cas.
"d" affiche bien l’accordéon mais pas de calendrier visible sous "Date of birth"

Par contre si je rentre une valeur à la main dans le input, j'obtiens :

Code :

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

<b>Warning</b>:  mysql_num_rows() expects parameter 1 to be resource, boolean given in <b>C:\wamp\www\Neuro\Neuro\AJAX\filtre.php</b> on line <b>47</b>

Salut,

Merci pour ta réponse.

Le problème est bien là, un calendrier devrait normalement s'afficher.

Voici la ligne qui pose problème :

Code :

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

<link rel="stylesheet" href="jquery/css/ui-lightness/jquery-ui-1.8.13.custom.css" />

Si je retire cette ligne, le calendrier s'affiche mais le CSS de l'accordéon n'est pas appliqué.

Qu'en penses-tu ?

Merci pour l'aide.

beegees

llaffont · 25/05/2011, 11h03

J'ai aucune erreur dans firebug quand je joues sur ton site.

Si en supprimant le CSS cela fonctionne, tu as sans doute un "display:none" qui cache ton calendrier lorsque tu demandes de l'afficher.

cherche l'erreur dans ton CSS en commentant morceau par morceau ton CSS.

llaffont · 25/05/2011, 11h14

J'ai trouvé une erreur ici dans ton CSS :

Code :

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

1
2
3
4
.ui-helper-hidden-accessible {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}

si je comment clip cela fonctionne.

Code :

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

1
2
3
4
.ui-helper-hidden-accessible {
  /*  clip: rect(1px, 1px, 1px, 1px);*/
    position: absolute !important;
}

Bovino · 25/05/2011, 11h15

Citation:

Code :

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

1
2
3
4
5
<script type="text/javascript" src="js/jquery.js"></script> 
...
<script type="text/javascript" src="js/jquery.js"></script> 
 
    <script type="text/javascript" src="jquery/js/jquery-1.5.1.min.js"></script>

Sinon, tu devrais vérifier dans les styles s'il n'y a pas de conflits de nommage des éléments...

llaffont · 25/05/2011, 11h33

Citation:

Envoyé par Bovino

Sinon, tu devrais vérifier dans les styles s'il n'y a pas de conflits de nommage des éléments...

J'ai regardé pour lui

j'ai rien trouvé si ce n'est le problème de clip évoqué plus haut.

beegees · 25/05/2011, 19h57

Citation:

Envoyé par llaffont

J'ai trouvé une erreur ici dans ton CSS :

Code :

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

1
2
3
4
.ui-helper-hidden-accessible {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}

si je comment clip cela fonctionne.

Code :

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

1
2
3
4
.ui-helper-hidden-accessible {
  /*  clip: rect(1px, 1px, 1px, 1px);*/
    position: absolute !important;
}

Salut,

Un super grand et sincère merci pour ton aide et surtout pour ton dévouement.

Tu m'as devancé, avec l'aide d'un ami, nous étions aussi arrivé à cette solution.

Tu crois que ce clip est une erreur ? Tu sais ce que c'est ?

Comme tu le dis, le fait de le commenter fait fonctionner le calendar.

Chez moi, il n'est par contre pas très joli les calendar.

Autre chose :

Est-ce normal que le calendrier ne s'ouvre pas avec ce code généré ? :

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
132
133
134
135
136
137
138
139
140
141
 
	<h3><a href="#">Demographic data</a></h3>
	<div>
		<p>
			Dmu number : <input type="text" onblur="verifier_dmu(this.value);" /> <label id="existe_deja"></label>
		</p>
        <p>
        	Name : <input type="text" />
        </p>
        <p>
        	Firstname : <input type="text" />
        </p>
        <p>
        	Gender : <select>
            	<option>-----</option>
                <option>Male</option>
                <option>Female</option>
            </select>
        </p>
        <p>
 
        	Birth date : <input type="text" class="datepicker" />
        </p>
        <p>
        	Deceased date : <input type="text" />
        </p>
        <p>
        	Date of last visit : <input type="text" />    
        </p>
	</div>
	<h3><a href="#">Non onco anteriority</a></h3>
	<div>
		 		Type of Anteriority : 
          <select>
            <option>------</option>
            <option>None</option>
            <option>Epilepsy</option>
            <option>Neurofibromatosis</option>
            <option>Neurofibromatosis and Epilepsy</option>
        </select>    
	</div>
	<h3><a href="#">Onco anteriority</a></h3>
	<div>
		 <p>
         	Type of cancer : 
        <select>
            <option>------</option>
            <option>None</option>
            <option>Cancer 1</option>
            <option>Cancer 2</option>
            <option>Cancer 40</option>
        </select>
         </p>    
 
        <p>
        	Surgery 
        	<select>
    			<option>------</option>
                <option>YES</option>
                <option>NO</option>
    		</select>
        </p>
        <p>
    		Radiotherapy <select>
    			<option>------</option>
                <option>YES</option>
                <option>NO</option>
    		</select>    	
        </p>
        <p>
        	Chemotherapy 
            <select>
    			<option>------</option>
                <option>YES</option>
                <option>NO</option>
    		</select>
        </p>
        <p>Date : <input type="text" /></p>
        <p>ICD-O : <select></select></p>
        <p>Place of surgery <select></select></p>
        <p>
        Surgery 
        <select>
            <option>-----</option>
            <option>YES</option>
            <option>NO</option>
        </select>
        </p>
        <p>
        	Radiotherapy 
            <select>
                <option>-----</option>
                <option>YES</option>
                <option>NO</option>
            </select>
        </p>
        <p>
        Chemotherapy 
            <select>
                <option>-----</option>
                <option>YES</option>
                <option>NO</option>
            </select>
        </p>
 
 
	</div>
 
 
 
 
 
    <!--
 
 
 
 
 
 
 
 
    </fieldset>
 
</div>    
<div>
 
 
 
        Oncological anteriority <select>
            			<option>-----</option>
                        <option>YES</option>
                        <option>NO</option>
    		        </select>
    </fieldset>
 
</div>
 
<input type="button" value="Validate" />	
 
 
	-->

J'ai modifié le code source sur le serveur.

Encore merci pour tout.

beegees

PS: je t'ajoute dans ma liste d'Amis

Bovino · 25/05/2011, 20h33

N'oublie pas non plus de n'inclure jQuery qu'une seule fois dans la page

beegees · 25/05/2011, 20h45

Citation:

Envoyé par Bovino

N'oublie pas non plus de n'inclure jQuery qu'une seule fois dans la page

Merci pour le complément d'informations Bovino.

J'ai retiré le doublon.

Bonne soirée à toi

beegees

danielhagnoul · 28/05/2011, 23h04

Bonsoir

Pour utiliser jQuery et jQuery UI les seuls liens à inclure dans votre code son rappeler à chaque sortie d'une version UI, pour UI 1.8.13 : http://www.developpez.net/forums/d10...13-disponible/.

25/05/2011, 09h50	#2
llaffont Membre éclairé Loïc Laffont Inscription : juin 2007 Messages : 495 Détails du profil Informations personnelles : Nom : Loïc Laffont Âge : 34 Localisation : France, Loire (Rhône Alpes) Informations forums : Inscription : juin 2007 Messages : 495 Points : 380 Points : 380	Salut, Je reviens de ton site et je n'ai aucun calendrier dans aucun des deux cas. "d" affiche bien l’accordéon mais pas de calendrier visible sous "Date of birth" Par contre si je rentre une valeur à la main dans le input, j'obtiens : Code : Sélectionner tout - Visualiser dans une fenêtre à part <b>Warning</b>: mysql_num_rows() expects parameter 1 to be resource, boolean given in <b>C:\wamp\www\Neuro\Neuro\AJAX\filtre.php</b> on line <b>47</b> __________________ En théorie tout devrait fonctionner... La France a un incroyable talent : Son retard en technologie informatique
	00

25/05/2011, 11h03	#4
llaffont Membre éclairé Loïc Laffont Inscription : juin 2007 Messages : 495 Détails du profil Informations personnelles : Nom : Loïc Laffont Âge : 34 Localisation : France, Loire (Rhône Alpes) Informations forums : Inscription : juin 2007 Messages : 495 Points : 380 Points : 380	J'ai aucune erreur dans firebug quand je joues sur ton site. Si en supprimant le CSS cela fonctionne, tu as sans doute un "display:none" qui cache ton calendrier lorsque tu demandes de l'afficher. cherche l'erreur dans ton CSS en commentant morceau par morceau ton CSS. __________________ En théorie tout devrait fonctionner... La France a un incroyable talent : Son retard en technologie informatique
	00

25/05/2011, 20h33	#9
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 803 Points : 35 803	N'oublie pas non plus de n'inclure jQuery qu'une seule fois dans la page __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	10

28/05/2011, 23h04	#11
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir Pour utiliser jQuery et jQuery UI les seuls liens à inclure dans votre code son rappeler à chaque sortie d'une version UI, pour UI 1.8.13 : http://www.developpez.net/forums/d10...13-disponible/. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	10

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