Discussion :

[merou19]

Bonjour à tous,

J'ai un projet Symfony 5, et mon problème concerne Jquery, d'où mon sujet dans cette rubrique.

Sur une page, j'ai un lien avec un bouton qui ajoute des lignes à mon formulaire, les lignes sont numérotées par un compteur.
Et sur chaque ligne, j'ai un lien pour supprimer cette ligne, que je repère par son compteur.

Mon problème se situe sur la suppression d'une ligne. J'ai un lien avec un onclick qui appelle une fonction Jquery.
Quand mon code de ma fonction est présent dans mon template Twig de ma page, ça marche bien.

Code dans ma boucle dans ma vue Twig :

Code html :

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

<a href="#prixProduit-fields-list" class="btn btn-danger" onclick="supprimer_ligneproduit({{ compteur }})">Supprimer</a>

Code de mon bouton dans ma vue Twig, et ça fonctionne :

Code :

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

1
2
3
4
5
6
7
8
<script>
	function supprimer_ligneproduit(counter) {
		var bloc_a_supprimer = 'id_ligneproduit_'+counter;
		var elem = document.getElementById(bloc_a_supprimer);
		elem.parentNode.removeChild(elem);
		return false;
	}
</script>

Maintenant, je veux regrouper tout mon code Jquery dans un fichier monprojet.js, que je compile avec webpack encore.
Et là, ma fonction ne marche plus, le clic sur le bouton ne fait rien.

J'ai essayé en encapsulant ma fonction avec le code suivant, sans succès :

Code :

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

1
2
3
$(document).ready(function supprimer_ligneproduit(counter) {
	...
});

Et le code qu'on m'a indiqué dans le forum Symfony hier, mais là, ça ne marche pas :

Code :

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

1
2
3
window.addEventListener('load', function supprimer_ligneproduit(counter) {
	...
});

Et j'ai essayé plein d'autres trucs foireux, sans succès.

Merci d'avance pour votre aide !

[darkstar123456]

Bonjour,

Si vous utilisez un attribut onclick="", il ne faut pas encapsuler le code dans un événement jQuery.ready().

Donc soit vous écrivez directement dans fichier javascript :

Code javascript :

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

1
2
3
 function supprimer_ligneproduit(counter) {
	  alert('clické : '+ counter);
  }

Soit vous retirez l'attribut onclick de votre HTML en ayant un moyen d'identifier les liens (classe ou attribut) + un attribut data-id par exemple pour passer l'ID

Code html :

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

1
2
3
<a href="#prixProduit-fields-list" class="btn btn-danger action-delete" data-id="1">Supprimer 1</a>
 
<a href="#prixProduit-fields-list" class="btn btn-danger action-delete" data-id="2">Supprimer 2</a>

Code jQuery :

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

1
2
3
$('body').on('click', '.action-delete', function() {
  alert('Lien cliqué : ' +  $(this).data('id'));
});

L'avantage de cette méthode est que je la trouve plus propre mais aussi que les liens resteront clickables même s'ils ont ajouté dans le DOM après le chargement du Javascript.
Voici cet exemple en live : https://codepen.io/DarkStar123456/pen/ZEJdQBm

Attention que votre façon d'utiliser jQuery.ready() n'est pas bonne dans ce cas.
On écrit plutôt habituellement comme ceci :

Code javascript :

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

1
2
3
4
$(document).ready(function() {
  // ici commencent les instructions
  // Sinon dans votre exemple, la fonction était automatiquement appelée à chaque chargement de page et plus jamais après
});

[merou19]

Merci beaucoup pour votre réponse et vos exemples !

Ok pour le onclick, que j'ai supprimé, et j'ai suivi votre façon de faire : c'est nickel !

Merci encore, ça m'a beaucoup aidé