IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Multiples JSCalendar indépendants


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Novembre 2002
    Messages
    62
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Industrie

    Informations forums :
    Inscription : Novembre 2002
    Messages : 62
    Par défaut Multiples JSCalendar indépendants
    Bonsoir et Joyeux Noël!

    Je voudrais utiliser plusieurs JSCalendar sur un site web.
    Un bout de code javascript (ci-dessous) permet d'ajouter dynamiquement un bloc contenant un champ de type 'input' pour la date et un autre de type 'input' pour le contenu. Entre les deux, un bouton permettant d'afficher le calendrier sous forme de popup et de pouvoir sélectionner la date.

    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
    <script type="text/javascript">
          var counter=1;
          $('.ajouter').click(function(){
             var newDetailBoxDiv = $(document.createElement('div')).attr("id", 'DetailBoxDiv' + counter);
             newDetailBoxDiv.html('<div class="date">' +
                                  '	Date&nbsp;&nbsp;<input type="text" name="date" id="calendar-field[' + counter + ']" \/>' +
                                  '	<button id="calendar-trigger[' + counter + ']">...<\/button>' +
                                  '	<script>' +
                                  '		Calendar.setup({inputField:"calendar-field[' + counter + ']",trigger:"calendar-trigger[' + counter + ']",onSelect   : function() { this.hide() }});' +
                                  '	<\/script>' +
                                  '<\/div>' +
                                  '<div class="contenu">Contenu <input type="text" class="texte" name="contenu" \/><\/div>');
     
             newDetailBoxDiv.appendTo("#detail_programme");
    	 counter++;
          });
    </script>
    Seulement voilà, seul le premier bloc (écrit en dur dans ma page php) fonctionne. Aucun des blocs suivants ajoutés dynamiquement ne fonctionnent. Lorsque je clique sur le bouton destiné à afficher le calendrier, ce dernier ne s'affiche pas et l'erreur javascript que j'ai est la suivante :Souriez-vous ce qu'il faut faire pour avoir de multiples JSCalendar indépendants ?
    Merci

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Regarde plutot du coté de l'attribution d'evenements sur les objets créés dynamiquement => on() ou live()
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre confirmé
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Novembre 2002
    Messages
    62
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Industrie

    Informations forums :
    Inscription : Novembre 2002
    Messages : 62
    Par défaut
    Bonsoir SpaceFrog!
    Merci pour ta réponse. Je pense avoir saisi l'utilisation de "live".
    J'ai donc remplacé le bout de code javascript
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    '<script>' +
    '     Calendar.setup({inputField:"calendar-field[' + counter + ']",trigger:"calendar-trigger[' + counter + ']",onSelect   : function() { this.hide() }});' +
    '<\/script>' +
    par ceci
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    '<script>' +
    '     $("button").live("click", "button", function() {Calendar.setup({inputField:"calendar-field[' + counter + ']",trigger:"calendar-trigger[' + counter + ']",onSelect   : function() { this.hide() }});})' +
    '<\/script>' +
    C'est presque ça, mais il faut que je clique 2 fois sur l'élément "button" pour que l'action désirée se fasse.
    J'ai essayé de remplacer "live" par "on", mais j'ai le message d'erreur suivant dans la console java
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("button").on is not a function
    Une piste supplémentaire serait la bienvenue. Merci.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Quelle version de jquery ??? on() est récent
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2010
    Messages
    59
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Santé

    Informations forums :
    Inscription : Décembre 2010
    Messages : 59
    Par défaut
    Sinon tu peux aussi te tourner vers la fonction delegate(), c'est ce que j'ai utilisé pour la génération de formulaires au clic (j'utilise des datepicker dans mes formulaires), et ça marche bien.
    http://api.jquery.com/delegate/

Discussions similaires

  1. Réponses: 87
    Dernier message: 06/07/2011, 15h33
  2. Création multiple table paradox dans le code
    Par scarabee dans le forum C++Builder
    Réponses: 8
    Dernier message: 30/10/2002, 10h17
  3. [Migratation] Application portable, indépendant du SGDB
    Par benouille dans le forum Décisions SGBD
    Réponses: 6
    Dernier message: 28/08/2002, 13h51
  4. Cherche composant Web Browser indépendant
    Par lancelot69 dans le forum Composants VCL
    Réponses: 2
    Dernier message: 31/07/2002, 11h14
  5. Réponses: 6
    Dernier message: 25/03/2002, 21h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo