Fonction à l'intérieur d'une classe

Version imprimable

Bonjour,

Voici mon code :

Code:

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:

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 :

Citation:

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

27/04/2024, 08h46
Toufik83

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)

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:

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:

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

Bonjour,
tu n'as pas lu attentivement la réponse de Toufik83, ou tu l'as mal interprétée !
Code:

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:

1 2 3 4 5 6 // (1) select: string defaultValue // (2) select: string paramètre // (3) select: object { container: 'paramètre'}
Citation:

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.