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

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

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

**beegees** · 25/05/2011, 19h57

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, 11h15

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>