Discussion :

[sylvain257]

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

[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)

[sylvain257]

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

[NoSmoking]

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.