Probléme de lancement de l'alert

Par emile01, il y a 9 ans

Javascript

Bonjour,
je suis un débutant dans le développement de JS, j'ai essayé plusieurs fois de faire fonctionner la confiramation (une alerte ) à l'utilisateur lors de la suppression d'un élément. Donc j'ai vérifié si j'ai aucun bouton checkbox non séléctionné donc une alert sera lancé pour informer l'utilisateur qu'il n'existe aucune séléction et si l'utilisateur séléctionne un ou plusieurs éléments donc une autre alert sera affiché pour la confirmation de la suppression. Dans mon cas j'utilise "sweet alert".

le probléme de mon code qui l'alert n'est pas fonctionnelle. J'ai postulé dans ce forum pour avoir vos aides mes amis.

Ce que je fais

-Code en html:

<!-- sweet alerts Css--> <link href="{{ asset('template/assets/sweet-alert/sweet-alert.min.css') }}" rel="stylesheet"> <!-- sweet alert JS--> <script src="{{ asset('template/assets/sweet-alert/sweet-alert.min.js') }}"></script> <script src="{{ asset('template/assets/sweet-alert/sweet-alert.init.js') }}"></script> <!-- form---> <form method="post" action="{{ path('projets_deleteAll') }}" <!--checkAll ---> <input type="checkbox" id="checkAll"/> {% for entity in entities %} <input type="checkbox" id="d" name="check[]" value="{{ entity.id}}"/> {% endfor %} <strong > <button type="submit" class="btn btn-lg btn-danger" id="bn" > <i class="fa fa-trash" ></i> Delete</button> </strong> </form> <!-- ./form--->

-Code Jquery:

$(document).ready(function(){ $("#checkAll").click(function(){ var checked_status = this.checked; $("input[name='check[]']").each(function(){ this.checked = checked_status; var v = $("#d").val(); $('#bn').trigger('submit', function (e){ e.preventDefault(); actiondesubsitution(); }); }); }); //vérifier si on a ou moins une séléction if(v.length>0){ //Ici l'alert de confirmation de la suppression document.querySelector('#d').onclick = function(){ swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: '#DD6B55', confirmButtonText: 'Yes, delete it!', closeOnConfirm: false }, function(){ swal("Deleted!", "Your imaginary file has been deleted!", "success"); }); }; } //ici l'alert pour infomer l'utilisateur qu'il n'existe aucune séléction else{ new SweetAlertDialog(this, SweetAlertDialog.ERROR_TYPE) .setTitleText("Oops...") .setContentText("No selection for deleting !") .show(); } });

Merci de m'aider ,

6 réponses

Kaelyscius, il y a 9 ans

Hello !
Je ne suis pas un expert mais je vais essayer de t'aider. Déjà j'aimerai savoir si tu as pas une erreur en console?

Pour moi, ta variable var v n'existe pas quand on arrive sur le IF. Car la variable var v est défini dans la fonction $("#checkAll").click(function(){...
Il y a peut être un problème ici en ce qui concerne la portée des variables.

Ensuite, as tu essayé de débugguer tout simplement en mettant des consoles.log('a'), 'b', 'ce que tu veux' pour savoir par ou passe ton script? Ou des breakpoints sur ton navigateur?

De plus il faut que tes inputs aient des id différents. Sinon ça pose (ou peut poser) problème car en javascript il ne sait pas quel élement du dom tu demande.

emile01, il y a 9 ans

salut Kaelyscius,
merci de consacrer votre temps pour m'aider ,

j'ai testé dans mon navigateur comme tu as la variable "v" je trouve qu'elle indéfini et aussi la fonction 'querySelector' qui est invalide selector.
est ce que j'ai mal déclaré la variable "v" ?

VM1631:187 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '[object HTMLDocument]' is not a valid selector. at Error (native) at CommandLineAPIImpl.$ (<anonymous>:187:84) at <anonymous>:1:1CommandLineAPIImpl.$ @ VM1631:187(anonymous function) @ VM1633:1 javascript: console.log(v.length); VM1634:1 Uncaught ReferenceError: v is not defined at <anonymous>:1:25(anonymous function) @ VM1634:1
Kaelyscius, il y a 9 ans

Hello,

Essaye de mettre var v = ""; après $(document).ready(function(){.. Car en fait avec la portée des variables var v est connu que dans $("input[name='check[]']").each(function(){})

Ensuite remplace var v = $("#d").val(); par "v = $(this).val();" car ici $(this) = $("input[name='check[]']") sinon tu peux faire un console.log($(this)) pour voir ce qu'est $(this) et l'erreur querySelector pour moi viens certainement du fait que les ID de tes inputs sont identique. Or, en HTML un ID doit être présent qu'une seule fois dans ta page. Du coup il n'arrive pas à trouver le selecteur que tu recherche.
le $("#d") devrai être $("#d-1"), $("#d-2") ou ce que tu veux pourvu que ton ID soit unique.
Enfin si quelqu'un mieux calé que moi peut confirmer c'est cool ^^

emile01, il y a 9 ans

vos idées nous avons permis de me pousser un peu vers la solution. En fait, j'ai proposé autre solution voilà le code ci-dessous:

$(document).ready(function () { $("#checkAll").click(function () { var checked_status = this.checked; var v=[]; $("input[name='check[]']").each(function () { this.checked = checked_status; v.push($(this).val()); if (v.length > 0) { //alert(v); -> j'ai les valeurs : 5, 4,3 document.querySelector('#bn').onclick = function () { swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: '#DD6B55', confirmButtonText: 'Yes, delete it!', closeOnConfirm: false }, function () { swal("Deleted!", "Your imaginary file has been deleted!", "success"); e.preventDefault(); actiondesubsitution(); }); }; } else { new SweetAlertDialog(this, SweetAlertDialog.ERROR_TYPE) .setTitleText("Oops...") .setContentText("No selection for deleting !") .show(); } }); }); });

Le probléme que l'alert de confirmation s'affiche mais elle sera caché vite fait son attend ma confirmation. Par contre la variable "v" elle contient tous les valeurs que j'ai séléctionné (alert(v)). Vraiment j'arrive pas a résoudre , merci de m'aider svp

Kaelyscius, il y a 9 ans

Hello,

Désolé si je ne répond pas vite, j'avoue avoir eu pas mal de boulot.

C'est un peu compliqué pour moi de t'aider comme ça sans pouvoir réellement tester ton code. Mais encore une fois, débug ton JS, met des breakpoints sur la console de ton navigateur, regarde par où ton code passe etc... ^^

Sinon essai de faire un JsFiddle avec ton html et ton code que je vois un peu mieux ce que tu fais. Car la pour moi c'est trop abstrait.

emile01, il y a 9 ans

Merci encore pour le temps que tu me consacré pour avoir la bonne solution :)

voilà le code dans le JsFiddle comme tu as dis Lien