Discussion :

[sylvain257]

Bonjour,

J'ai une application front-end dans lequel j'ai une couche avec les entreprises (donnée ponctuelle) qui sont géolocalisées sur une carte (map).

Quand je clique sur un point, j'ai une fiche qui s'ouvre à l'aide d'une modale et dans lequel j'ai un formulaire de mise à jour.

J'ai créé une classe JS "Entreprise" dans laquelle j'ai un constructeur ayant comme paramètres les données natives de l'entreprise, tq le nom, l'adresse, le numéro de tel, etc.

J'ai plusieurs fonctions à l'intérieur de cette classe. Dans l'une d'elles, je récupère une valeur 'intérêt' de 1 à 5 (fonction rate())

J'ai une autre fonction qui permet de mettre à jour le formulaire (function update()) A l'intérieur de cette fonction, on retrouve une requête ajax, dans laquelle on retrouve la liste des paramètres et notamment cette valeur citée précédemment.

Le problème c'est que je n'arrive pas à récupérer la valeur retournée par la fonction rate() dans la fonction update(). La requête AJAX plante systématiquement.

A l'intérieur d'une classe, comment récupérer une valeur d'une fonction pour l'utiliser dans une autre ?

Merci pour vos retours.

Bonne journée,

Sylvain

[SpaceFrog]

Je vois ... Je vois Dans ma boule de crisal ... un bout de code ?
Si si là en bas à droite..


Ha ben non c'est le prix que j'ai oublié d'enlever ...

[Doksuri]

peux-tu nous faire une POC de la structure de ton code ? j'ai du mal a suivre

sinon, pour retourner une valeure, tu fais juste une methode publique (ou alors je n'ai pas compris ton probleme)

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
class classA {
    #a = 'private A';
    constructor() {
 
    }
    getA() {
        return this.#a;
    }
}
 
const maClassA = new classA();
maClassA.getA(); // retourne 'private A'

[sylvain257]

J'ai ça :


Ma classe telle qu'elle est déclarée :

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
class Carte {
    constructor({reference = "", intitule = "", annee = "", interest = ""}){
        this.reference = reference,
        this.intitule = intitule,
        this.annee = annee,
        this.interest = interest
    }
 
add(){  /// qui permet d'afficher les informations dans une div
 
document.getElementById("info_carte").innerHTML = 
`<form action="" id="cpa_edit">
<div><input type="text" id="fd_reference" value="${this.reference}"></div>
<div><input type="text" id="fd_intitule" value="${this.intitule}"></div>
<div class="my-rating">${this.interest}"</div>
<button type="submit">Soumettre</button>
</form>`
 
}
 
rate(){ /// j'utilise ici la notation par étoiles jQuery avec starRating
$(".my-rating").starRating({
            useFullStars: true,
            emptyColor:'transparent',
            strokeColor: 'black',
            starSize: 22,
            readOnly: false,
            hoverColor:'grey',
            activeColor:'black',
            ratedColor:'gold',
            ratedColors:'yellow',
            useGradient:false,
            initialRating: this.interest,
            disableAfterRate:false,
            onClick: function(currentIndex, currentRating, $el){
                return currentRating;
            }
        });
}
 
update(){
        $.ajax({
            url:"monfichier.php?",
            type:"POST",
            data:{
                "reference":$("fd_reference").val(),
                "intitule":$("fd_intitule").val(),
                "interest":this.interest ?? currentRating //// et c'est là que systématiquement ça renvoie "currentRating" is not defined
            },
            success:function(data){
                M.toast({html: 'Données de la carte mises à jour !', displayLength: 5000, classes: 'toast_success'});
            },
            error:function(err){
                M.toast({html: 'Erreur :' + err, displayLength: 5000, classes: 'toast_error'});
            }
        })
    }
}

et la nouvelle instance de classe donne ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
            var carte = new Carte({
                reference : donnee_reference,
                intitule : donnee_intitule,
                interest : donnee_interest
            })
 
carte.add();
 
            $("#cpa_edit").on('submit', function(e){  /// Mise à jour fiche
                e.preventDefault();
                carte.update();
            })

N'étant pas développeur professionnel, mais étant géomaticien faisant du développement, sûrement que je ne fais pas ça dans les règles de l'art et que certains trucs doivent faire que les pros se tirent les cheveux, que pensez-vous de mon code ?

Merci pour vos retours

Sylvain

[Doksuri]

est-ce que les donnes que tu recois sont correctes ?

donnee_reference, donnee_intitule, donnee_interest ?

[sylvain257]

Oui les données sont correctes, ce sont des données issues d'un click d'une couche de tuiles vectorielles.
(et le return de la fonction rate() renvoie correctement la donnée)

[NoSmoking]

Bonjour,

(et le return de la fonction rate() renvoie correctement la donnée)

certes mais la valeur de la fonction est retournée où ?

currentRating n'est définie que dans le retour de ta fonction sur le onclick, nulle part ailleurs.

[sylvain257]

Oui effectivement, mais si je lui dit après il connaît pas.

Avec une portée de variable plus grande que "var", (cad sans var) ça passerait crème, mais dans les fonctions de classe, ces variables passent pour des variables non déclarées

[NoSmoking]

Oui effectivement, mais si je lui dit après il connaît pas.

si j'interprète ta pensée il semblerait que tu ais un soucis avec la portée du this pour affecter ta variable this.interest.

Si on reprend ta méthode rate(), re-indentée pour que l'on y voit plus clair :

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
rate() { /// j'utilise ici la notation par étoiles jQuery avec starRating
    $(".my-rating").starRating({
        useFullStars: true,
        emptyColor: 'transparent',
        strokeColor: 'black',
        starSize: 22,
        readOnly: false,
        hoverColor: 'grey',
        activeColor: 'black',
        ratedColor: 'gold',
        ratedColors: 'yellow',
        useGradient: false,
        initialRating: this.interest,
        disableAfterRate: false,
        onClick: function(currentIndex, currentRating, $el) {
            return currentRating;
        }
    });
}

il te faut préserver le contexte, le this, pour pouvoir y accéder après exécution du click.

Un façon de faire est de créer une variable qui met en « mémoire » le this et utiliser celle-ci dans le retour de la fonction.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
rate() {
    const thisObj = this;                  // préserve le contexte
    $(".my-rating").starRating({
        // ...
        initialRating: this.interest,     // ici le this est le bon 
        disableAfterRate: false,
        onClick: function(currentIndex, currentRating, $el) {
            //mise à jour propriété via thisObj
            thisObj.interest = currentRating;
        }
    });
}

[sylvain257]

Merci pour ce retour. Mais du coup où se trouve le return ? (par ce qu'il doit être sorti du onclick)

[NoSmoking]

Mais du coup où se trouve le return ?

Pourquoi vouloir mettre un return à tout prix, ce que l'on attend c'est une action sur un événement.

(par ce qu'il doit être sorti du onclick)

Non, comment fais-tu pour savoir où retourner l'information, à l'appelant ... mais c'est le bouton, sur une action qui s’exécutera plus tard voire jamais ! La plupart du temps on utilise des fonctions dites « callback » mais tu peux mettre le traitement directement dans ta fonction en faisant attention à ce que représente le this comme dans ton cas.

Pour mon info, quelle source utilises-tu pour ton starRating ?

[sylvain257]

C'est-à-dire que cette donnée remontée par l'event , doit alimenter une fonction AJAX de mise à jour.

Mais je met "thisObj.interest" dans ma fonction ajax de mise à jour, la fonction va planter, me disant qu'il n'a pas pu déterminer "thisObj.interest"...

[NoSmoking]

La plupart du temps on utilise des fonctions dites « callback »

c'est à cela que servent les fonctions dites « callback », à faire suivre/remonter les données recueillies.

Code :

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

1
2
3
4
5
6
7
8
9
rate() {
    const thisObj = this;                  // préserve le contexte
    $(".my-rating").starRating({
        // ...
        onClick: function(currentIndex, currentRating, $el) {
            thisObj.sendNotation(currentRating);
        }
    });
}

et dans ta class une méthode sendNotation.

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
sendNotation(valeur) {
    $.ajax({
        // ...
        data: {
            valeur
        },
        context: this,
        done: function(data) {
            // mise à jour variable
            this.interest = valeur;
            // traitemant de la réponse ici
            // ou via une fonction callback
        }
    })
}

ou quelque chose d'approchant.

[Edit] ligne #10 currentRating devient valeur

[sylvain257]

Alors j'ai un truc comme ça, je sais pas trop si c'est dans les règles de l'art, mais ça semble fonctionner.



La question est : cette valeur redescendue au click (qui se cache derrière le "thisObj.newrating(currentRating)"), je dois la récupérer dans une autre classe pour une fonction de mise à jour.



Merci :-)

[NoSmoking]

Je vois avec satisfaction que tu tiens compte des commentaires qui te sont faits

#1 : merci de mettre le code, entre balises [CODE][/CODE], dans la discussion plutôt que des images. Il est ainsi plus facile de faire des copies de code pour test ou citation.

je dois la récupérer dans une autre classe pour une fonction de mise à jour.

tu n'as jamais entendu parlé des paramètres passés aux fonctions ?