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

[NoSmoking]

@Toufik83 :
effectivement, je n'avais pas capté l'environnement, entre autre.

- Je ne vois pas ce qu'apporte la mise en place d'une class CadastreData !
- Quelle est la plus value de l’utilisation de DataTable, si c'est juste pour le formatage de sortie ... ?
- Pourquoi re-construire la table à chaque appel Ajax et donc d'une nouvelle DataTable ?
... et bien d'autres ... comme l'accumulation de class qui ne servent en fait à rien si ce n'est à embrouiller le code !

Néanmoins, un exemple de mise en place d'un click sur un élément est donné : Generated content for a column, c'est l'utilisation de la délégation.

[sylvain257]

Comme je disais dans d'autres posts, je ne suis pas développeur professionnel, juste géomaticien.

J'ai découvert les classes que très récemment, et il est tout à fait probable qu'il y a des choses qui feraient enrager les pros. Mais bon, mon appli a au moins le mérite de fonctionner.

Quant à la classe cadastreData, il y a pas que les données présentées. Elle est surtout pas très bien nommée, elle pourrait s'appeler Parcelle que ce serait surement mieux et plus explicite.

Encore merci pour vos aides :-)

Sylvain

[NoSmoking]

J'ai découvert les classes que très récemment, ...

ce n'est pas une raison pour les mettre à toutes les sauces, ce que tu as besoin c'est de NameSpace, espace de nom, qui vont te permettre de regrouper des fonctionnalités, comme une notion de module, sans risque de collision avec d'autres fonctions.

Bonne continuation

[sylvain257]

Bonjour,

Je ré-ouvre ce billet.

J'ai un peu nettoyé mon code histoire que mes classes fassent référence à de vrais objets et de ne pas mettre de mise en forme côté classes. Mais je suis désormais à un nouveau prb :

Dans une classe, j'ai des fonctions comme celle là qui sont des return d'appel ajax

Code :

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

1
2
3
4
5
6
7
8
9
10
    proprietaire(){
        return $.ajax({
            url: './index.php',
            type:'GET',
            datatype:'json',
            data:{
              "parcelle":this.parcelle
            }
        })
    }

J'ai un second fichier dans lequel je récupère le return comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
    function ft_parcelle(parc){
 
var par = new Parcelle({
        map:map,
        parcelle:parc
    })
 
    par.proprietaire().done((data) => {
 
}
}

Cette fonction par.proprietaire().done donne la liste des propriétaires sous la forme d'une Datatable (toujours là même).

Le problème est le suivant : this est undefined du début à la fin, et du coup je ne peux pas appeler de fonctions extérieures à l'intérieur de celle-ci. Et je ne peux donc pas appeler de fonctions à l'intérieur du callback initComplete de Datatable.


Est ce que quelqu'un aurait une idée ?

Merci

Sylvain

[unanonyme]

Bonjour,

pourriez vous partager un peu plus de code
et l'organisation dans les répertoires.

Bonne journée.