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

JavaScript Discussion :

Fonction à l'intérieur d'une classe


Sujet :

JavaScript

  1. #1
    Membre régulier
    Homme Profil pro
    Enseignant
    Inscrit en
    Novembre 2018
    Messages
    141
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Novembre 2018
    Messages : 141
    Points : 78
    Points
    78
    Par défaut Fonction à l'intérieur d'une classe
    Bonjour,

    Voici mon code :

    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
    export class Collection {
        constructor({id_collection='', nom_collection=''}){
            this.id_collection = id_collection,
            this.nom_collection = nom_collection
        }
     
        liste(){
            return $.ajax({
                url: API_CPA + 'metadata/collection',
                type: 'GET',
                context:this,
                datatype: 'json'
            })
        }
     
        select(container=''){
     
            this.container = container;
            var thisObj = this;
            this.liste().done((data) => {
     
            $(this.container).html(`<option value="${thisObj.id_collection}" disabled selected>${thisObj.nom_collection}</option>`);    
     
            let records = data.records;
     
            records.forEach((coll) => {
                const option = document.createElement('option');
                option.value = coll.id;
                option.innerText = coll.nom_collection;
     
                $(this.container).append(option);
     
            })
        })
        }
    }
    dans un autre fichier, cette classe est instanciée et la fonction select() est appelée comme suit :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
                  collection.select({
                    container:'#cpa_edit.collection'
                  })
    Le problème est que la liste déroulante n'est pas peuplée par les options. J'ai un retour console :

    Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined
    Je sais que c'est un problème de contexte, mais je ne sais pas comment le contourner.

    Merci pour votre aide,

    Sylvain

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 428
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 428
    Points : 4 910
    Points
    4 910
    Par défaut
    Bonjour,

    Non, ce n'est pas un problème de contexte mais de déclaration et utilisation des paramètres.

    Soit vous modifiez l'appelle à la méthode avec un paramètre de type chaine de caractère (pas d'accolades ni aucune propriété) collection.select('#cpa_editcollection'), soit gardez l'appelle telle quelle et rajoutez les accolades {} autour du paramètre de la méthode select select({container=''}) (n'oubliez pas aussi de supprimer le point . dans le id "#cpa_editcollection", ça ne fonctionnera pas avec)

  3. #3
    Membre régulier
    Homme Profil pro
    Enseignant
    Inscrit en
    Novembre 2018
    Messages
    141
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Novembre 2018
    Messages : 141
    Points : 78
    Points
    78
    Par défaut
    De mon côté, cela ne fonctionne pas, les champs déroulants ne sont pas peuplés.

    J'ai rien modifié du côté de la classe, voila l'instance de classe Collection avec la fonction select(). Concernant le selecteur, je cherche à sélectionner la div ayant comme class "collection" dans la div "#cpa_edit".
    Petite précision, je travaille avec Materialize

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $(document).ready(function(){
                    $('select').formSelect();
     
                      var collection = new Collection({
                        id_collection : carte.id_collection,
                        nom_collection : carte.nom_collection  
                      })
     
                      collection.select({
                        container:'#cpa_editcollection'
                      });
     
                  });
    Et voila mon HTML (pour info cet html est écrit en javascript avec (selector).html(), en jQuery.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <div class="row">
    <div class="col s6 m6 input-field"><select class="collection" required></select><label>Collection</label></div>

    Merci pour votre aide.

    Sylvain

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 034
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 034
    Points : 44 406
    Points
    44 406
    Par défaut
    Bonjour,
    tu n'as pas lu attentivement la réponse de Toufik83, ou tu l'as mal interprétée !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function select(container = "defaultValue") {
      console.log("select :", typeof container, container);
    }
    // (1)
    select();
    // (2)
    select("paramètre");
    // (3)
    select({
      container: "paramètre"
    });
    donnera comme résultat :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    // (1)
    select: string defaultValue
    // (2)
    select: string paramètre
    // (3)
    select: object { container: 'paramètre'}
    Concernant le selecteur, je cherche à sélectionner la div ayant comme class "collection" dans la div "#cpa_edit".
    donc en paramètre tu dois passer un sélecteur CSS valide.

Discussions similaires

  1. Réponses: 12
    Dernier message: 25/07/2009, 16h59
  2. Création fonction avec argument dans une classe
    Par Général03 dans le forum Windows Forms
    Réponses: 8
    Dernier message: 30/06/2009, 09h57
  3. Réponses: 3
    Dernier message: 18/02/2009, 22h06
  4. Fonction CallBack membre d'une classe
    Par kimlee dans le forum C++
    Réponses: 9
    Dernier message: 08/08/2007, 13h31
  5. [C++] Fonction amie vituelle dans une classe ?
    Par Bob.Killer dans le forum C++
    Réponses: 11
    Dernier message: 04/12/2005, 13h42

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