Discussion :

[sylvain257]

Bonjour,

Je suis confronté au pb suivant :
- j'ai une classe avec des fonctions, à l'intérieur desquelles sont générées des tableaux Datatables.

Le problème est que je ne comprends pas pourquoi quand on déclare une fonction dans le onClick, le retour est systématiquement undefined, le "this" est undefined et que quand je réinitialise this (genre thisObj = this) et que j'appelle une fonction avec, le retour est invariablement "la fonction fonction() n'est pas définie".

Comment contourner ce pb ?

merci

Sylvain

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
thisObj = this;
 
                        "columns": [
                            {data: 'reference', render: function(data, type, row) {
                                return `<a href="#" id="${row.sha1}" onclick="thisObj.readCarte('${row.sha1}')">${row.reference}</a>`; // ici 
                                }
                            },
                            {data: 'intitule', render: function(data, type, row) {
                                return `${row.intitule}`;
                                }
                            },
                            {data: 'date', render: function(data, type, row) {
                                return `${row.annee ? row.annee : 'nc'}`;
                                }
                            }
                    ]

[Toufik83]

Bonjour,

Le mot clé this vaut toujours à la fonction parente dans laquelle il a été appelé, dans votre cas la fonction parente est function(data, type, row).

Si vous remplacez la fonction parente par une fonction fléchée, votre problème sera résolu :

Au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
render: function(data, type, row){
   return `<a href="#" id="${row.sha1}" onclick="thisObj.readCarte('${row.sha1}')">${row.reference}</a>`; // ici
}

Mettez :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
render: (data, type, row)=>{
    return `<a href="#" id="${row.sha1}" onclick="this.readCarte('${row.sha1}')">${row.reference}</a>`; // vous voyez ici le this et pas thisObj !
}

[sylvain257]

J'ai essayé mais ça ne fonctionne pas.

Chose que je n'ai pas mentionné dans le post précédent, c'est que cette table générée par Datatables est alimentée par un appel AJAX. Le 'this" pointerait-il sur l'AJAX ?

Voila mon code modifié.

Là où est appelé ma fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
                  columns: [
                      {data: 'dnuper', render: (data, type, row)=>{
                          return `<a href="#" id="${row.numero}" onclick="this.infoProprietaire('${row.numero}', '${row.compte}')">${row.numero}</a>`;
                          }
                      },

La dite fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
    infoProprietaire(numero, compte){
      new Proprietaire({
        numero:numero,
        compte:compte
      }).addFiche()
    }

dans addFiche se trouve des appels ajax qui permettent de faire une fiche propriétaire.

Et là, le click renvoie systématiquement "this.infoProprietaire is not a function", et je trouve pas pourquoi....

Merci

Sylvain

[Toufik83]

Si comme tu dis la génération des DataTables se trouve dans la fonction success d'ajax, et que le mot clé function est utilisé, ceci dit que this représente cette fonction.

Il faudrait voir la totalité du code pour vous répondre correctement...

[NoSmoking]

Bonjour

render: (data, type, row)=>{ // ...

cette notation est acceptable pour des objets/namespaces mais pas pour des class

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
const NS = {
  render: () => {
    console.log("yes!!")
  },
}
 
Class MaClass {
  constructor() {}
 
  laMethode: function() {
    // le code
  }
 
  laMethode() {
    // le code
  }
}

`<a href="#" id="${row.numero}" onclick="this.infoProprietaire('${row.numero}', '${row.compte}')">${row.numero}</a>`

lorsqu'un gestionnaire d'événement est in-line, le this correspond à l'élément du DOM sur lequel est attaché l'écouteur.

Une solution consisterait à passer par des méthodes static mais je dois admettre que j'ai du mal à voir ce que tu essaies de faire !

[sylvain257]

En fait, j'ai une carte sur lequel j'ai des parcelles. Quand je clique sur une parcelle, une sidebar s'ouvre avec les données de la parcelle. On retrouve tout un tas de données dont les propriétaires de la parcelle. Ces propriétaires remontent dans une table générée par datatables.

Un propriétaire est identifié via un identifiant unique. Je suis obligé de flouter, car ce ne sont pas des données opensource.



Dans ce tableau "MBA584" est cliquable qui permet d'ouvrir la fiche propriétaire, d'où mon onclick "inline" qui permet d'accéder à la fiche.

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
  class CadastreData {
    constructor({
        parcelle = ""
    }){
        this.parcelle = parcelle
    }
 
 
 
 
    infoProprietaire(numero, compte){
      new Proprietaire({
        numero:numero,
        compte:compte
      }).addFiche() // qui permet d'afficher la fiche propriétaire (là dedans on ne retrouve pas que le numero, le nom et l'adresse, on retrouve aussi la liste des parcelles associées à ce propriétaire.
    }
proprietaire(){
$.ajax({
            url: 'fichier.php?',
            type:'GET',
            datatype:'json',
            data:{
              "parcelle":this.parcelle
            },
            success: (data) => {
 
              $('#liste_proprietaires').html(`
                  <table class="table_dt" id="proprios">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Nom</th>
                            <th>Adresse</th>
                        </tr>
                    </thead>
                  </table>`);
 
                var table = $('#proprios').DataTable({
                paging: true,
                autoWidth:false,
                scrollCollapse: false,
                fixedHeader: true,
                pageLength : 10,
                destroy: true,
                ordering:false,
                responsive:true,
                  language:{
                      "info":           "_START_ de _END_ sur _TOTAL_",
                      "infoEmpty":      "0 résultat",
                      "zeroRecords":  "Pas de résultat"
                  },
                  dom:'Bt',
                  data:response,
                  columns: [
                      {data: 'dnuper', render: (data, type, row)=>{
                          return `<a href="#" id="${row.numero}" onclick="this.infoProprietaire('${row.compte}', '${row.numero}')">${row.numero}</a>`; // mon click inline qui permet d'accéder à la fiche propritéaire
                          }
                      },
                      {data: 'ddenom', render: (data, type, row)=> {
                          return `${row.nom_prop}`;
                          }
                      },
                      {data: 'adresse', render: (data, type, row)=> {
                          return `${row.adresse ? row.adresse : 'nc'}`;
                          }
                      }
                ]
              });
          }
          }
        })
}

Voila :-)

Merci

Sylvain

[Toufik83]

cette notation est acceptable pour des objets/namespaces mais pas pour des class

Oui, je sais mais pour ce cas le render est une option de DataTable, ce n'est pas une méthode de classe.

Sinon, je pense que la solution la plus simple est de stocker les valeurs de compte et numero dans des attributs data-compte et data-numero et utiliser le callback initComplete pour attacher l'écouteur de "click", puis supprimer le onclick des éléments HTML <a></a>:

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
columns: [{
     data: 'dnuper',
     render: (data, type, row) => {
           return `<a href="#" id="${row.numero}" data-compte="${row.compte}" data-numero="${row.numero}" >${row.numero}</a>`;
     },
     {....},
     {....}
],
initComplete: (settings, json) => {
	let obj=this;
        console.log('settings :', settings, ', this :', this)
        $(settings.nTable).on('click', 'td:nth-child(1) a', function(ev) {
                let numero = $(this).attr('data-numero'), compte = $(this).attr('data-compte');
                console.log('infoProp :', obj.infoProprietaire(compte, numero));
         });
}

[melka one]

jour

si tu veut que sa fonctionne il faut declarer l'evenement dynamiquement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="thisObj.readCarte('${row.sha1}')"

dans ce code thisObj est une chaîne de caractère qui ne peut contenir la référence de this se trouvant dans la variable thisObj precedement créé c'est pour ça que thisObj ne retourne rien