Retour de donnée ajax

**Jessyv96** · 08/10/2018, 12h22

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 :

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
 
  $(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 :

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.

**fenrir0680** · 09/10/2018, 08h50

Salut,

Dans ta fonction onSuccess, un petit

Code :

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

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?

**Jessyv96** · 09/10/2018, 10h20

Salut, merci pour ton retour,

Console.log(data)

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 ?

**Jessyv96** · 09/10/2018, 10h24

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
 
/**
     * @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";
      }
    }

**Jessyv96** · 10/10/2018, 10h55

up

**fenrir0680** · 10/10/2018, 12h17

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 :

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

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 :

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

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

ou tu écris direct un truc du genre

Code :

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

$('#etiquette_conso').attr('src', 'path/to/my/picture/' + image_conso);

**Jessyv96** · 10/10/2018, 17h38

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 ?

**armel18** · 10/10/2018, 18h08

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 :

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

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

pour recuperer le chemin depuis le fichier JS:

Code :

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

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)

**fenrir0680** · 11/10/2018, 10h39

Salut,

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

Code :

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

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 :

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

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.

**Jessyv96** · 11/10/2018, 11h20

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 :

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

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

et mon onSuccess :

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

Retour de donnée ajax [3.x]

Symfony PHP

Discussions similaires

Partager

Partager