Tabs avec datepicker

**theo17** · 10/02/2013, 16h41

Bonjour,
Découvrant jsquery, j'essaie de mettre en place quelques framework de jquery, notamment tabs, datepicker et datatables.
Un premier test seul avec tabs est parfait, un autre seul avec datepicker également parfait, mais lorsque je mets les deux ensemble, les onglets s'affichent bien mais quand je clique sur la zone date pour faire afficher le calendrier, rien ne se produit, j'ai beau cliqué, rien !!!
Que se passe t il ??
Voilà le code :

Code html :

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
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Test des onglets</title>
<link rel='stylesheet' href='JsQuery/jquery-ui-1.10.0.custom/development-bundle/themes/base/jquery.ui.css'>
<link rel='stylesheet' href='JsQuery/jquery-ui-1.10.0.custom/development-bundle/themes/base/jquery.ui.all.css'>
<link href='JsQuery/jquery-ui-1.10.0.custom/development-bundle/themes/base/jquery.ui.datepicker.css' rel='stylesheet' type='text/css' /> 
<script src='JsQuery/jquery-ui-1.10.0.custom/js/jquery-1.9.0.js'></script>
<script src='JsQuery/jquery-ui-1.10.0.custom/js/jquery-ui.js'></script>
<script src='JsQuery/jquery-ui-1.10.0.custom/development-bundle/ui/jquery.ui.core.js'></script>
<script src='JsQuery/jquery-ui-1.10.0.custom/development-bundle/ui/jquery.ui.widget.js'></script>
<script src='JsQuery/jquery-ui-1.10.0.custom/development-bundle/ui/jquery.ui.tabs.js'></script>
<script type='text/javascript' src='chemin_Dev/ui/i18nj/query.ui.datepicker-fr.js'></script> 
<link rel='stylesheet' href='JsQuery/jquery-ui-1.10.0.custom/development-bundle/demos/demos.css'>	
<script>
        $(function() {
                $( "#tabs" ).tabs();
                jQuery.noConflict(); (j'ai rajouté çà au cas où)
                $( "#datepicker" ).datepicker();
        });
        </script>
</head>
<body>
<div>
   <h2>Essai &nbsp; d'écrans &nbsp; avec  &nbsp;onglets</h2><br>
   <form action="/Test_onglet.php" method="post">
      Saisie date : <input type=text id=datepicker name=annee><br><br>
      <input type=submit value='Validation' name=ok>
   </form>
</div>
<div id=tabs>
   <ul>
      <li><a href=#tabs-1>Titre premier onglet</a></li>
      <li><a href=#tabs-2>Titre deuxième onglet</a></li>
      <li><a href=#tabs-3>Titre troisième onglet</a></li>
   </ul>
   <div id=tabs-1><p>Contenu du premier onglet.</p>
   Saisie date : <input type=text id=datepicker name=annee><br><br>
   </div>
   <div id=tabs-2>
      <form action="/Test_onglet.php" method="post">
         <input type=submit value='Validation' name=ok>
      </form>
   </div>
   <div id=tabs-3><p>Contenu du troisième onglet, première ligne.</p>
                  <p>Contenu du troisième onglet, deuxième ligne.</p>
   </div>
</div>
</body>
</html>

Je n'ai pas encore essayé le datatable, y a t il quelque chose de spécial pour l'intégrer avec tabs et autres ??
Merci de vos réponses.

**almoha** · 11/02/2013, 09h37

Bonjour,

Il te manque une quantité impressionnante de guillemets (id, href, type). Le code posté est-il vraiment celui que tu utilises ? Si c'est le cas, rajoute déjà les guillemets manquants.

**theo17** · 11/02/2013, 11h30

Ce code est bien celui que j'utilise, il est le résultat du code source renvoyé par le php et quand j'ai fait l'essai de chaque script seul, pour le tabs et pour le datepicker, cela marchait bien, même sans ces guillemets.
Mais je viens quand même de les rajouter et le résultat est toujours le même, mes onglets s'affichent bien, mais pour le datepicker j'ai beau cliqué sur l'un ou l'autre de mes input, il ne se passe toujours rien.
Merci des réponses.

**Bovino** · 11/02/2013, 11h36

Code :

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

jQuery.noConflict(); (j'ai rajouté çà au cas où)

Le commentaire, tu l'as mis dans ton code ?

**theo17** · 11/02/2013, 14h07

non bien sûr, c'était juste pour dire que j'avais rajouté cette ligne car je pensais à des conflits entre tabs et datepicker

**danielhagnoul** · 11/02/2013, 14h39

Un ID doit être unique !

Tabs avec datepicker

jQuery

Vue hybride

Discussions similaires

Partager

Partager