Discussion :

[Zarkoffe]

Bonjour,
Je tente de passer une variable d'une twig vers une autre (je suis sous Symfony 4.2). Seulement je rencontre une difficulté
Voici mon ajax:

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
          <script>
            function UeToListEmargements(Ue)
            {		
              alert(Ue);
              $.ajax({
                method: "POST",
                //url: "src/Controller/PanelProfController.php",
                url: "{{ path('emargementsParCours') }}",
                data: { Ue : Ue }
              })
              .done(function( retour_html ) {
                $("#UeGet").html( retour_html );
              })
              .fail(function() {
                alert( "error UeToListEmargements()" );
              });
              window.location.href = '{{ path('emargementsParCours') }}';
            }
          </script>

J'ai créé un window location, car sinon ma page n'est pas redirigé.
Mon alert de ma variable me renvoie bien la bonne valeur, mais pourtant quand je rentre dans l'ajax l'erreur du .fail ressort.
Une fois que j'arrive sur la page "emargementsParCours", ma console m'indique que ma variable n'est pas définie.
Une idée? Svp ne pas détruire tout ce que j'ai fais, je dois être à un détail près d'y parvenir.
Merci d'avance à tous

[NoSmoking]

Bonjour,

J'ai créé un window location, car sinon ma page n'est pas redirigé.

cela signifie que ta démarche n'est pas la bonne, si u veux rediriger il ne te faut pas passer par Ajax.

mais pourtant quand je rentre dans l'ajax l'erreur du .fail ressort.

c'est donc qu'il y a un problème et dans ce cas autant afficher l'erreur ou regarder dans la console.

Une idée? Svp ne pas détruire tout ce que j'ai fais, je dois être à un détail près d'y parvenir.

Plutôt qu'une idée, un conseil, toujours commencer par regarder le code HTML généré, et comme tu l'as sous la main nous mettre celui-ci en lieu et place du code serveur

[Zarkoffe]

Bonjour et merci pour ta réponse.
Ah donc je ne sais pas, en fonction de mon cas, ce que je dois utiliser : si je dois passer par de l'ajax, ou par autre chose.
Ce que je veux faire : j'ai une liste de cours, et je veux que lorsque je clic sur l'un d'eux, je me retrouve sur une page (qui est commune à chacune). La seule différence devra être le nom du cours en question bien sûr.
Voici mon code HTML et mon AJAX :

Code HTML :

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
         <h3> Liste des cours que vous dispensez </h3>
         	{% for elementListePointage in listeDePointage %}
            <script>
              var Ue = '{{ elementListePointage.nomUe }}';
              //alert(Ue);
            </script>
            <input type="button" onclick="UeToListEmargements(Ue)" value="{{ elementListePointage.nomUe }}" class="btn btn-success" /></div>
          <script>
            function UeToListEmargements(Ue)
            {           
              alert(Ue);
              $.ajax({
                method: "POST",
                url: "{{ path('emargementsParCours') }}",
                data: { Ue : Ue }
              })
              .done(function( retour_html ) {
                $("#UeGet").html( retour_html );
              })
              .fail(function() {
                alert( "error UeToListEmargements()" );
              });
              window.location.href = '{{ path('emargementsParCours') }}';
            }
          </script>
 
          {% endfor %}

Indication : mon alert(Ue) me renvoie bien le cours que j'ai choisie à chaque fois. Et si le .fail se déclenche quand je clic sur un cours, c'est que la fonction est bien appelée. Alors si la fonction est appelé, la variable est bien présente, qu'est-ce qui cloche? Pour rappel je suis sous symfony 4.2.
Vois-tu quelque chose qui cloche dans mon code qui déclencherait mon .fail?
Merci!

[NoSmoking]

On n'a toujours pas

le code HTML généré, et comme tu l'as sous la main nous mettre celui-ci en lieu et place du code serveur

... mais bon !

Ce que je veux faire : j'ai une liste de cours, et je veux que lorsque je clic sur l'un d'eux, je me retrouve sur une page (qui est commune à chacune). La seule différence devra être le nom du cours en question bien sûr.

Visiblement l'appel Ajax semble effectivement une solution.

Indication : mon alert(Ue) me renvoie bien le cours que j'ai choisie à chaque fois.

Normal c'est en entrée de fonction, cela montre juste que ta fonction est bien appelée.

Vois-tu quelque chose qui cloche dans mon code qui déclencherait mon .fail?

Ce qui cloche c'est que tu n'utilises pas les paramètres en retour dans ta méthode fail pour savoir ce qui se passe

Code :

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

1
2
3
.fail(function (arg) {
  console.log("ERROR :", arg);  // F12 pour accéder à la console
});

[Zarkoffe]

le code HTML généré, et comme tu l'as sous la main nous mettre celui-ci en lieu et place du code serveur

Désolé je ne vois pas ce que tu cherches! j'ai déjà posé le HTML, tu veux des captures d'écrans ou autre chose?

Voici ce que ressort le console.log :

sur la droite tu peux voir que la première erreur vient du console.log de ma page initiale "profListeCours", et ensuite j'accède à la page où la variable n'est donc pas définie puisqu'elle n'est pas bien passé "emargementParCours".

en déroulé:

Merci d'avance!

[NoSmoking]

... j'ai déjà posé le HTML ...

non tu as posté le code HTML que tu as écrit mais le code HTML généré mais bon ! Le but est juste de voir ce qu’interprète le navigateur et si cela correspond à ce que tu souhaites réellement.

Si je reprend ton appel Ajax dans ta fonction

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
function UeToListEmargements(Ue) {
    alert(Ue);
    $.ajax({
        method: "POST",
        url: "{{ path('emargementsParCours') }}",
        data: {
            Ue: Ue
        }
    }).done(function (retour_html) {
        $("#UeGet").html(retour_html);
    }).fail(function () {
        alert("error UeToListEmargements()");
    });
    window.location.href = '{{ path('emargementsParCours ') }}';
}

on voit que window.location.href = '{{ path('emargementsParCours ') }}' s’exécute potentiellement avant ton retour Ajax, qui est asynchrone, donc le JavaScript de ta page en cours « meurt ».

Met en commentaire la ligne : window.location ..., et regarde ce qui se passe.

[Zarkoffe]

Bonjour,
Voici le HTML généré pour un cours :

Code HTML :

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
                      <script>
              var Ue = 'GEO_09 Théories des organisations';
              //alert(Ue);
            </script>
          <div class="row justify-content-md-center">
            <!-- Earnings (Monthly) Card Example -->
            <div class="col-xl-12 col-md-12 mb-12">
              <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                        <input type="button" onclick="UeToListEmargements(Ue)" value="GEO_09 Théories des organisations" class="btn btn-success" /></div>
                      <div class="h4 mb-0 font-weight-bold text-gray-800">
                      </div>
                    </div>
                    <div class="col-auto">
                      <i class="fa fa-book  fa-2x text-gray-300"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
 
          <script>
            function UeToListEmargements(Ue)
            {           
              //alert(Ue);
              $.ajax({
                method: "POST",
                //url: "src/Controller/PanelProfController.php",
                url: "/prof/emargementsParCours",
                data: { Ue : Ue }
              })
              .done(function( retour_html ) {
                $("#UeGet").html( retour_html );
              })
              .fail(function (arg) {
                console.log("ERROR :", arg);  // F12 pour accéder à la console
              });
              //window.location.href = '/prof/emargementsParCours';
            }

Le code a été mis en commentaire. Je n'ai rien qui s'affiche dans ma console, mais symfony me montre qu'une requête AJAX a été effectuée en POST


Merci d'avance

[NoSmoking]

L'étape suivant est de savoir ce que te retourne le serveur avec un simple console.log dans la méthode done

Code :

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

1
2
3
4
.done(function (retour_html) {
  console.log("RETOUR :", retour_html);
  $("#UeGet").html(retour_html);
})

Tu peux également tester le retour avec un simple echo "bonjour à vous " . $_POST['Ue']; dans ton fichier appelé.

[Zarkoffe]

Merci pour ta réponse!
Le code HTML qui apparait dans la console est le suivant :

Code HTML :

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

         <h3><center> Cours sélectionné : <div id="UeGet"></div></center></h3>

Je n'utilise pas de echo car je ne peux pas, pour rappel je suis dans Symfony 4.2, j'utilise donc des fichiers en .twig

La valeur envoyée ne semble pas apparaitre dans ma div, elle reste comme si j'avais chargé le fichier sans rien faire. Je voudrai que la valeur passée en paramètre apparaisse dans mon

Code HTML :

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

 <div id="UeGet"></div>

Là je ne sais pas trop vers quoi chercher... si la variable passe bien (car sinon on ne passerait par le done, non?) et qu'elle n'apparait pas, comment faire?
Merci d'avance!

[NoSmoking]

Là je ne sais pas trop vers quoi chercher...

Lorsque tu écris

Code :

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

$("#UeGet").html(retour_html);

cela signifie que le innerHTML de ton élément ayant pour id="UeGet" est remplacé par le contenu de retour_html.

On ne trouve nulle part dans ton HTML de départ d’élément ayant cette ID, par compte on le retourne dans ton retour_html,

Code html :

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

<h3><center> Cours sélectionné : <div id="UeGet"></div></center></h3>

cela ne peut donc pas fonctionner.

[Zarkoffe]

Je suis désolé mais j'ai beau relire ta réponse, je ne vois pas ce qui cloche dans mon code.

cela signifie que le innerHTML de ton élément ayant pour id="UeGet" est remplacé par le contenu de retour_html.

Oui c'est ce que j'essaye de faire, je veux remplacer mon div qui a pour id "UeGet" par la valeur renvoyée par l'ajax. Pourquoi ça ne fonctionne pas?
Et aussi pourquoi est-ce que je ne suis pas redirigé vers la page en question?
Ici on balance vers le bon path:

Code :

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

1
2
 
url: "{{ path('emargementsParCours') }}",

C'est bien mais si je n'accède pas à la page ça n'a pas d'intérêt :/ Pourquoi la redirection ne se fait pas mais Symfony voit bien que je réalise une requête AJAX?
Peux-tu me donner un début de code/d'élément de réponse?
J'utilisais ce code dans un autre projet one-page-website (pas en Symfony) et ça fonctionnait, qu'est-ce qui cloche ici? Est-ce lié à Symfony?

Merci pour tes réponses en tout cas

[NoSmoking]

Je suis désolé mais j'ai beau relire ta réponse, je ne vois pas ce qui cloche dans mon code.

C'est peut-être plus ta façon de voir les choses qui est en cause.

Je vais reprendre la base avec un petit exemple.

Sur base du code HTML simple suivant :

Code html :

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
<main>
  <h1>Exemple Ajax minimaliste</h1>
  <p>
    <label>Sélectionnez un article</label>
    <select>
      <option value="0">Choix article</option>
      <option value="1">Article Un</option>
      <option value="2">Article Deux</option>
      <option value="3">Article Trois</option>
      <option value="4">Article Quatre</option>  
    </select>
  </p>
  <div id="retour"></div>
</main>
<script>
  // le script écrit ci-dessous
</script>

on notera la présence d'un élément ayant pour id="retour".

Sur base du script ci-dessous :

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
function loadData(param) {
  $.ajax({
    url: "article.php",
    method: "POST",
    dataType: "html",
    data: {
      "article": param
    }
  }).done(function (retour) {
    $("#retour").html(retour);
  }).fail(function (xhr) {
    console.log("Error :", arguments);
  });
}
$("select").on("change", function (ev) {
  ev.preventDefault();
  loadData(this.value);
});

Ce script fait que au changement de la sélection du <select> on fait une requête Ajax, vers la page article.php en passant en paramètre la valeur du <select>.

J'ai construit, un peu à l'arrache, un petit fichier PHP pour te monter ce qui se passe et que tu pourra donc tester.

Fichier article.php :

Code php :

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
<?php
$num = -1;
if( isset($_POST['article'])){
  $num = $_POST['article'] -1;
}
$mess = '<h1>Article #' .($num +1).'</h1>';
switch ($num) {
  case 0:
    $mess  .= 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis.';
    break;
  case '1':
    $mess  .= 'Donec auctor, ex vitae laoreet mollis, ligula mauris tincidunt ex. ';
    break;
  case '2':
    $mess  .= 'Aliquam pharetra eget purus eget gravida. Donec a sapien pulvinar. ';
    break;
  case '3':
    $mess  .= '<ul><li>In et leo vitae eros tincidunt cursus.</li><li>Etiam dapibus sapien a eros dapibus, ac elementum augue posuere.</li></ul>';
    break;
  default:
    $mess  = '<span class="erreur">Erreur :</span><br>aucun article concerné !';
}
echo $mess;
?>

A chaque fois que je vais changer la sélection la requête sera envoyée et le résultat, sous forme de code HTML, de celle-ci qui est fonction du paramètre viendra « remplir » l'élément ayant pour id="retour", c'est la base.

Teste déjà cela pour voir l'utilité d'Ajax, qui semble convenir à ton besoin !

Et aussi pourquoi est-ce que je ne suis pas redirigé vers la page en question?

j'en reviens au même commentaire que j'ai fait plus haut

cela signifie que ta démarche n'est pas la bonne, si u veux rediriger il ne te faut pas passer par Ajax.