Retour de donnée ajax

Version imprimable

Bonjour à tous,

J'ai un petit soucis avec mon projet, je cherche à concaténer un string avec une donnée Json dans un {{ asset() }} reçu avec une requête AJAX et changé d'image en fonction d'un résultat, sauf ma variable est inexistante, après plusieurs tentatives, aucun succès, auriez vous une solution pour moi, svp ?

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 $(function() { $("#button_submit").on('click', function(e){ e.preventDefault(); let formData = $('#ajaxResquest').serialize(); $.post({ url: '{{path('etiquette_energie_calcul')}}', data: formData, dataType: 'json', success: onSuccess, error: onError, }); }); }); function onSuccess(data) { conso_totale = jQuery.parseJSON(data.consototale); $('#conso_totale').val(conso_totale); emission_totale = jQuery.parseJSON(data.emissiontotale); $('#emission_totale').val(emission_totale); //classe_conso = jQuery.parseJSON(data.classe_conso); $('#class_conso').val(data.classe_conso); $('#class_emission').val(data.classe_emission); image_conso = JSON.stringify(data.image_conso); $('#etiquette_conso').attr('src', '{{ asset('bundles/abcingetiquetteenergie/img/etiquettes/' ~ image_conso ~ '') }}'); }
Erreur :

Citation:

Variable "image_conso" does not exist.

image_conso est inexistante dans mon code Jquery, mais dans un console log j'obtiens bien un string je ne comprends pas ce qui se passe.

09/10/2018, 08h50
fenrir0680

Salut,

Dans ta fonction onSuccess, un petit

Code:

console.log(data)

nous permettrait dans voir les valeurs de retour de ta fonction ajax.

Après si "data.image_conso" n'existe pas, c'est qu'il y a peut-être un problème dans ton controller.
Peut-on voir le code de ton controller symfony qui gère ta requête ajax?
09/10/2018, 10h20
Jessyv96

Salut, merci pour ton retour,

Console.log(data)

Citation:

Object { consototale: 30.67, emissiontotale: 0.4, classe_conso: "A", classe_emission: "A", image_conso: "etiquette_conso_A.png", image_emission: "etiquette_emission_A.png" }

Par contre, je me suis rendu compte de quelques choses, lorsques j'envois ma requête, dans le profiler, je n'envois pas de donnée relative au images, serait-ce pour cela que lorsqu 'il renvoie la reponse Json, il n'arrive pas à détecter "image_conso ?

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
37
38
39
40
41
42
43
44
45
46
47
 
/**
     * @Route("/application/calcul",
     *     name="etiquette_energie_calcul"
     * )
     *
     * @param Request $request
     * @return \Symfony\Component\HttpFoundation\RedirectResponse|\Symfony\Component\HttpFoundation\Response
     */
    public function Calculs(Request $request)
    {
$consototale = 25; 
 
    if($consototale <=50){
        $classe_conso = "A";
        $image_conso = "etiquette_conso_A.png"; 
 
      } elseif($consototale <= 90 AND $consototale > 50 ) {
        $classe_conso = "B";
        $image_conso = "etiquette_conso_B.png";
 
      } elseif($consototale <= 150 AND $consototale > 90 ) {
        $classe_conso = "C";
        $image_conso = "etiquette_conso_C.png";
 
      } elseif($consototale <= 230 AND $consototale > 150 ) {
        $classe_conso = "D";
        $image_conso = "etiquette_conso_D.png";
 
      } elseif($consototale <= 330 AND $consototale > 230 ) {
        $classe_conso = "E";
        $image_conso = "etiquette_conso_E.png";
 
      } elseif($consototale <= 450 AND $consototale > 330 ) {
        $classe_conso = "F";
        $image_conso = "etiquette_conso_F.png";
 
      } elseif($consototale <= 590 AND $consototale > 450 ) {
        $classe_conso = "G";
        $image_conso = "etiquette_conso_G.png";
 
      } else {
 
        $classe_conso = "H";
        $image_conso = "etiquette_H.png";
      }
    }

10/10/2018, 10h55
Jessyv96

up :?
10/10/2018, 12h17
fenrir0680
Salut,

Déjà on voit que ton objet data contient bien image_conso,
donc apriori ton problème ne vient pas de ton controller qui retourne bien tes données.
Après en relisant ton code
Code:

1 2 3 image_conso = JSON.stringify(data.image_conso); $('#etiquette_conso').attr('src', '{{ asset('bundles/abcingetiquetteenergie/img/etiquettes/' ~ image_conso ~ '') }}');
je ferais un petit console.log(image_conso) entre ses deux lignes pour m'assurer que image_conso retourne bien quelque chose.

Et dernière remarque ton {{ asset('bundles/abcingetiquetteenergie/img/etiquettes/' ~ image_conso ~ '') }} est géré par twig si je ne me trompe?
Du coup ta variable javascript image_conso n'est pas connu côté serveur.
Pour palier ce problème, soit dans ton controller tu retourne l'adresse complète de ton image et tu fais

Code:

$('#etiquette_conso').attr('src', image_conso);

ou tu écris direct un truc du genre

Code:

$('#etiquette_conso').attr('src', 'path/to/my/picture/' + image_conso);
10/10/2018, 17h38
Jessyv96

Ahh , je comprends les variables javascript ne sont pas disponible dans du twig, t'as solution me paraît correct sauf qu' il faut que j'accède à mon fichier via le dossier /web, c'est pour ça que j'ai utilisé la fonction asset() mais la je suis embêter parce que je n'arrive pas générer mon chemin sans passer asset(), je ne sais pas si en symfony il y a une function côté controller du même type que asset() en twig ?
10/10/2018, 18h08
armel18
Citation:

Envoyé par Jessyv96

Ahh , je comprends les variables javascript ne sont pas disponible dans du twig, t'as solution me paraît correct sauf qu' il faut que j'accède à mon fichier via le dossier /web, c'est pour ça que j'ai utilisé la fonction asset() mais la je suis embêter parce que je n'arrive pas générer mon chemin sans passer asset(), je ne sais pas si en symfony il y a une function côté controller du même type que asset() en twig ?

pour générer le chemin depuis la vue twig tu peux lier la fonction asset() comme valeur d'un champ caché:
Code:

1 2 <input type="hidden" name="path" value="{{ asset('bundles/abcingetiquetteenergie/img/etiquettes/') }}" />
pour recuperer le chemin depuis le fichier JS:
Code:

1 2 3 let path_image= $( "input[name=path]" ).val() $('#etiquette_conso').attr('src', path_image+ image_conso);
il est aussi possible de passer asset() comme valeur d'un attribut data( voir data attribute dans la vue)

Salut,

Du côté de symfony, tu peux faire dans ton controller un truc du genre:
Code:

1 2 3 4 5 6 7 8 9 10 public function monAction (\Twig_Environment $twig) { ... ... ... $template = $this->twig->load('Path/to/my/template/generateUrl.twig'); $monUrlImage = $template->renderBlock('url', ['image_conso' => 'bundles/abcingetiquetteenergie/img/etiquettes/'.$imageConso]) }
Et créer un template twig qui pourrait ressembler à cela:
Code:

1 2 3 4 {% block url%} {{ absolute_url(asset({ image_conso })) }} {% endblock %}
Tu peux également regarder du côté du générateur d'url de symfony.

Un grand merci à vous, j'ai finalement réussi à faire ce que voulais, je suis passé par la solution armel18 qui m'a paru plus clair et qui fonctionne très bien voila le code final de mon input hidden :

Code:

1
2
 
<input type="hidden" name="path" value="{{asset('bundles/abcingetiquetteenergie/img/etiquettes/')}}">

et mon onSuccess :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function onSuccess(data) {
      let path = $('input[name=path]').val();
 
      conso_totale = jQuery.parseJSON(data.consototale);
      $('#conso_totale').val(conso_totale);
 
      emission_totale = jQuery.parseJSON(data.emissiontotale);
      $('#emission_totale').val(emission_totale);
 
      //classe_conso = jQuery.parseJSON(data.classe_conso);
      $('#class_conso').val(data.classe_conso);
 
      $('#class_emission').val(data.classe_emission);
 
       image_conso = data.image_conso;
       image_emission = data.image_emission
      $('#etiquette_conso').attr('src', path+image_conso);
      $('#etiquette_emission').attr('src', path+image_emission);
 
    }

Je note ta solution fenrir0680 qui me servira probablement à l'avenir, merci bcp :D