En-tête head qui empêche le bon fonctionnement d'un script jquery

Version imprimable

Bonjour à tous,

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

Voici le code de mon head :
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 <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:

<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

25/05/2011, 09h50
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:

<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>
25/05/2011, 10h00
beegees

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:

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

<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
25/05/2011, 11h03
llaffont

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

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

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

Code:

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

si je comment clip cela fonctionne.

Code:

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

Citation:
Code:

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

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

25/05/2011, 11h33
llaffont

Citation:

Envoyé par Bovino

:no:

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 :D j'ai rien trouvé si ce n'est le problème de clip évoqué plus haut.

Citation:

Envoyé par llaffont

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

Code:

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

si je comment clip cela fonctionne.

Code:

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:

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

25/05/2011, 20h33
Bovino

N'oublie pas non plus de n'inclure jQuery qu'une seule fois dans la page :aie:
25/05/2011, 20h45
beegees

Citation:

Envoyé par Bovino

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

Merci pour le complément d'informations Bovino.

J'ai retiré le doublon.

Bonne soirée à toi ;)

beegees
28/05/2011, 23h04
danielhagnoul

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/.