Sujet Précédent Sujet Suivant

Utilisation du plugin datepicker

Résolu/Fermé
Lechiffre50 Messages postés 4 Date d'inscription lundi 3 septembre 2018 Statut Membre Dernière intervention 28 avril 2020 - 3 sept. 2018 à 16:02
 Lechiffre50 - 4 sept. 2018 à 15:07
Bonjour,

Lorsque j'utilise le plugin datepicker dans une page html normale tout fonctionne bien.

J'aimerais définir une page en trois parties par des <div>
<div id="header">.....</div>
<div id="body">....</div>
<div id="footer">....</div>

Les contenus de ces <div> seront modifiés dynamiquement par du code php et javascript.

Lorsque je génère le code qui fait appel au plugin datepicker dans le <div> ça ne fonctionne plus.
i.e. si on clique sur l'élément le calendrier de s'affiche plus.

J'ai noté que certains attributs et événemets ne sont pas générés.

Y-a-t-il une solution ?
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
3 sept. 2018 à 20:02
Bonjour,

Lorsque je génère le code qui fait appel au plugin datepicker dans le <div> ça ne fonctionne plus.
i.e. si on clique sur l'élément le calendrier de s'affiche plus.

Sans voir ton code .... IMPOSSIBLE de te répondre.

NB : Pour poster ton code, merci de le faire en utilisant les BALISES DE CODE.
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

0
Réponse 2 / 2
Lechiffre50
Modifié le 3 sept. 2018 à 21:44
Voici le code HTML incluant du code javascript 
<!DOCTYPE [/html/htmlintro.php3 html]>
<html>
<head>
<!--- Include the above in your HEAD tag -->
 <link rel="stylesheet" type="text/css" href="Datepicker/jquery-ui.css">
 <script src="Datepicker/jquery-1.5.1.js"></script>
 <script src="Datepicker/jquery.ui.core.js"></script>
 <script src="Datepicker/jquery.ui.widget.js"></script>
 <script src="Datepicker/jquery.ui.datepicker.js"></script>
 <script> 
  $(function() {
   $( "#datepicker" ).datepicker({
    dateFormat: 'yy-mm-dd'
   })
  });
 </script> 
 <script> 
  function change_date(date) {
   var nouveau_code = '<div style="width:500px; height:auto; font-size:small;">\
   <div class="demo">\
   <p>Select the date: <input type="text" id="datepicker" value="2099-12-12"></p>\
   </div>\
   </div>';
   alert("La date va être changée pour: "+date);
   document.getElementById('datepicker').value = date;
   alert("Le code va être changé");
   //document.getElementById("code").style.display = "block";
   document.getElementById('code').innerHTML = nouveau_code;
  };
 </script> 
</head>
<body>

 
 <div id="code">
  <div style="width:500px; height:auto; font-size:small;">
   <div class="demo">
 <p>Select the date: <input type="text" id="datepicker" value="50-06-25"></p> 
   </div>
  </div>
 </div>
 <button type="submit" onclick="change_date('2023-01-01')">Change date</button>


EDIT : Ajout des balises de code
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
3 sept. 2018 à 21:07
Et led balises de code... tu en as fais quoi ???
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
Modifié le 3 sept. 2018 à 21:51
Le problème c'est que tu recréés le datepicker dans ton js (dans la fonctionchange_date )
pourquoi faire ?
Il est déjà créé... si tu veux juste en changer la date il faut utiliser la bonne fonction... tout simplement
Un truc du genre 

 function change_date(date) {
   alert("La date va être changée pour: "+date);
   //$('#datepicker').val(date);
  $( "#datepicker" ).datepicker('setDate', date); // pour mettre la date dans le datepicker  
  };
0
Lechiffre50 Messages postés 4 Date d'inscription lundi 3 septembre 2018 Statut Membre Dernière intervention 28 avril 2020 > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
4 sept. 2018 à 01:28
Bonjour Jordan45,

L'exemple est simplifié pour montrer ce que je veux faire. Il est évident que ce bout de code n'a aucun sens.

Voici donc en détail ce que je veux faire:

Définir une page WEB divisée en trois sections par des "div"

1) Entête
2) Corps
3) Pied de page

L'entête et le pied de page sont fixes en utilisant des proprités CSS donc ils restent toujours en haut et en bas de la page respectivement.

Dans l'entête il y a un menu pour accéder à différentes fonctions.

Exemple: Comptabilité Informatique Cinéma Budget

Quand on clique sur une de ces fonctions, le code HTML correspondant est injecté dans la section "Corps" avec
une commande semblable à celle utilisée dans mon exemple:

document.getElementById('code').innerHTML = nouveau_code;

Mais lorsque le "nouveau_code" contient des références à un plugin "datepicker", le plugin ne fonctionne pas.
Tous les autres types HTML comme "input" "button" "href" etc. fonctionnent.

En utilisant le débuggueur de Firefox j'ai remarqué que dans le code généré normalement avec le plugin datepicker
il y a des éléments qui s'ajoutent, comme (class="hasDatepicker") et des écouteurs d'événements (focus, getData, keypress, keydown, keyup, setdata). Ces élément ne sont pas générés lorsque j'injecte le code tel que décrit plus haut.

Voilà !
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
4 sept. 2018 à 07:20
Normal..
A chaque création dynamique de dic datepicker...tu dois relancer l'initialisation du datepicker
0
Lechiffre50
4 sept. 2018 à 15:07
Merci Jordane45...ça fonctionne maintenant !
0

Discussions similaires

Ressource demandée en cours d'utilisation
Taylow -
Elaura23 -

11 réponses
dossier en cour d'utilisation ?? blocage windows
taylor001 -
Utilisateur anonyme -

4 réponses
Problème JDownloader: erreur plugin (périmé)
Milka-Overdose -
Comme ca -

23 réponses
L'imprimante et en cours d'utilisation ou une
obviousa -
Jann31 -

3 réponses
désolé les données que vous utilisez sont invalides
Sweat_Blast -
Shotoendevore -

50 réponses