Mettre un lien twig dans du HTML inséré dans un code JavaScript

Version imprimable

Bonjour,

Dans un twig d'un projet Symfony, j'ai un bout de code en JavaScript (AJAX).

Dans ce code en JavaScript, je génère de l'HTML pour afficher un tableau dans une modal. Du coup, dans ce tableau je met différentes informations que je récupère de ma BDD et je met notamment des boutons "Supprimer".

Ce que j'essaie de faire, c'est de faire en sorte que ces boutons (qui sont des liens <a></a>) soient dirigés vers une action du controlleur qui supprimera l'objet en question grâce à son Id, ici il s'agit de coffres.

Je ne vois pas comment faire étant donner que je cherche à donner un path du routing dans du code HTML et non dans le twig en lui même.

J'ai mis en rouge la partie de code qui me pose problème. Peut être que la méthode que j'emploie n'est pas la bonne. Pouvez vous m'orienter pour rendre le code fonctionnel?

Je vous remercie,

Voilà mon code JavaScript:

base.html.twig:
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 <script type="text/javascript"> $(document).ready(function() { var contenuModal; var tableauCoffre = new Array(); var currentCoffre; var valueCoffreOnline = function() { $.ajax( { type: 'GET', url: "{{ url('ajax_appli_coffre_requete') }}", success: function(data) { nb_coffres = data["nombre_coffre"]; listeCoffres = data["liste_coffres"]; contenueModal = '<table><thead><tr><th>Nombre d\'objets</th><th>Couleur du coffre</th></tr></thead><tbody>'; var currentCoffre; for(currentCoffre of listeCoffres) { contenueModal = contenueModal + '<tr><td>' + currentCoffre.nombre_objets + '</td><td>' + currentCoffre.couleur + '</td><td><a id="suppr" href={{ path('ajax_appli_supprimer_coffre', {'coffre_id': currentCoffre.id}) }} role= "button" value="Supprimer"></a></td></tr>'; } contenueModal = contenueModal + '</tbody></table>'; //On récupère le div du modal et on le complète avec la variable contenuModal document.getElementById('coffremodal').innerHTML = contenueModal; $("#carre_rouge_notification").html(nb_coffres); } }); } valueCoffreOnline(); }); </script>

il me semble trés simple de lancer des action supprimer avec ajax .

Code:

1
2
3
4
5
6
7
8
9
10
11
 
 
{% for xx  in xx %}
 
    <tr> 
        <td>      
            <a id="id="{{xx.id}}"" href='#'    class='btn btn-sm btn-primary'>
                <span class=''></span> xx
            </a>
        </td>                                            
    </tr>

Ensuite tu mets du javascript

Code:

1
2
3
4
5
 
 <script type="text/javascript">
        $("#{{xx.id}}").click(function () {
     // ton appel  ajax , l'action supprimer avec en parametre l id concernée //
});

Re,

Non, justement, je ne peux à priori pas faire ce que tu me proposes étant donnée que dans ton premier code, c'est du twig. Moi, je génère du pur html via le JavaScript.

Du coup, je ne peux pas utiliser les accolades comme tu fais dans:
Code:

1 2 3 4 5 6 7 8 9 {% for xx in xx %} <tr> <td> <a id="id="{{xx.id}}"" href='#' class='btn btn-sm btn-primary'> <span class=''></span> xx </a> </td> </tr>
De toute façon, tout ce que je fais, je le fais dans un bloc <script type="text/javascript"></script>.

Etant donné que je ne peux pas utiliser du twig dans ce que je génère comment puis-je me débrouiller. Peut être uniquement avec du JavaScript?

Merci de m'orienter

une méthode de borg bien bourrin permet de répondre à ton problème ( si j'ai bien compris la question)

en javascript :

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

var valueCoffreOnline = function()
	{
		$.ajax(
		{
			type: 'GET',
			url: "{{ url('ajax_appli_coffre_requete') }}",

			success: function(data)
			{
url = "{{ path('ajax_appli_supprimer_coffre', {'coffre_id': 'xxx'}) }}";   // le modèle qui va servir dans la boucle javascript  // 'xxx' est l’appât qui va être remplacé par l'id dans la boucle


				nb_coffres = data["nombre_coffre"];
				
				listeCoffres = data["liste_coffres"];

				contenueModal = '<table><thead><tr><th>Nombre d\'objets</th><th>Couleur du coffre</th></tr></thead><tbody>';
				
				var currentCoffre;
				for(currentCoffre of listeCoffres)
				{
                                     url_current = url.replace("xxx", currentCoffre.id);    //  on modifie xxx par l'id,  et ouééé mec les borgs sont les meilleurs

					contenueModal = contenueModal + '<tr><td>' + currentCoffre.nombre_objets + '</td><td>' + currentCoffre.couleur + '</td><td><a id="suppr" href="' + url_current +'" role= "button" 
					 value="Supprimer"></a></td></tr>';
				}

				contenueModal = contenueModal + '</tbody></table>';

				//On récupère le div du modal et on le complète avec la variable contenuModal
				document.getElementById('coffremodal').innerHTML = contenueModal;
				
				$("#carre_rouge_notification").html(nb_coffres);
			}
		});
	}

	valueCoffreOnline();
});
</script>

c'est pas merveilleux ça ?

05/01/2016, 17h35
Henry22

Je te remercie Dukoid. Cette méthode fonctionne très bien.

Je vais tout de même creuser ta solution MehrezlabidiMehrez car ça pourrait à priori marcher si je modifie mon code.