Discussion :

[AMP29]

Bonjour,

Une 'confirm box' arrête bien le déroulement du code tant qu'elle n'a pas reçu une réponse.
Mais pas une bootstrap modal ? J'ai beau multiplier les façons de l'appeler...

Je ne comprends pas.
Une fenêtre modal, pour moi c'est une fenêtre qui met en pause le code.

J'ai besoin que l'utilisateur réponde à une question avant de poursuivre.
J'appelle bootstrap modal dans mon javascript.

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
        function Solder(solde, prixsolde, dateDeb, dateFin, id) {

            if (solde == false) {
               $("#modal_confirm_solde_cancel").modal('show'); <-- La fenêtre s'ouvre bien mais... le code n'en a rien à fiche
              }

            if (confirm("Voulez-vous supprimer la solde ?")) {   <-- Le code continue... la confirm box s'affiche en même temps que la 'bootstrap modal'  
                                                                                                 si elle n'était pas là, ajax serait exécuté

                $.ajax({                                                           <-- La poursuite de la fonction attend la fermeture de la "confirm box"
                    url: '@Url.Action("SolderArticle","Articles")',
                    data: { id: id, solder: solde, prix: prixsolde, dateDeb: DEB, dateFin: FIN },
                    success: function (data) {
                     etc... etc... 

                });

            } 
        }

Est-ce qu'une bootsrtap modal est faite pour ça ?
Est-ce qu'elle est vraiment modale ou est-ce que c'est juste pour rire ?

J'ai aussi essayé d'ouvrir la 'modal' hors de la fonction javascript puis d'intercepter la réponse pour exécuter la fonction, mais j'ai absolument besoin d'une data liée à la donnée qui déclenche la fonction et je la perds par cette méthode car elle n'est pas transmise à la fenêtre Bootstrap modal.

Merci pour votre aide

[AMP29]

Je viens documenter une solution avec Bootstrap Modal.

Contexte :
Je remplis une table au chargement de ma vue.
Chaque ligne correspond à un produit défini par son id généré dynamiquement.
La colonne de droite est celle des actions, notamment une icône "Supprimer".
Un clic sur cette icône doit ouvrir une fenêtre modal pour confirmer ou non la suppression.

Comme l'ouverture de la modale à l'intérieur d'une fonction javascript ne fonctionne pas, je dois l'ouvrir avant, et elle est déclenchée par le clic sur l'icône.
Je dois récupérer l'id de la ligne concernée et ne pas la perdre afin de fournir l'id à la fonction de suppression si la confirmation est validée.

Pour cela je créé et définis l'attribut 'name' de l'icône avec l'id de la ligne. C'est l'information que je ne dois pas perdre jusqu'à la fonction.

Code :

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

1
2
3
4
 
            IconCancel.setAttribute("data-bs-toggle", "modal");
            IconCancel.setAttribute("data-bs-target", "#modal_confirm_solde_cancel");
            IconCancel.setAttribute("name", id);

Ensuite je crée une variable de portée supérieure, 'idConfirm' qui contiendra l'id.

Cette variable est actualisée ainsi (code déclenché lorsque la 'modale' est 'show') :

Code :

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

1
2
3
4
5
6
 
        var idConfirm = "00000";
 
        $('#modal_confirm_solde_cancel').on('show.bs.modal', function (event) {
            idConfirm = event.relatedTarget.attributes.name.value;
        });

Ensuite quand l'utilisateur a fait son choix, je le traite ainsi (grâce à l'id du bouton de la modale) :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
        $('#modal_confirm_solde_cancel').on('hide.bs.modal', function (event) {
            var activeElement = $(document.activeElement);
 
            if (activeElement[0].id == "Ouibtn") {
 
                Solder(true, idConfirm);
 
            }
        });

Pour info, le HTML de la fenêtre modale :

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
 
    <section id="modal_confirm_solde_cancel" class="modal" tabindex="-1" style="display:none">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" style="margin-left: 15px;">Suppression de la solde</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Confirmez-vous la suppression de cette solde ?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" id="Ouibtn" class="btn btn-dark" data-bs-dismiss="modal">Oui</button>
                    <button type="button" id="Nonbtn" class="btn btn-secondary" data-bs-dismiss="modal">Non</button>
                </div>
            </div>
        </div>
    </section>

Une belle usine à gaz pour une fenêtre modale qui... devrait faire son travail normalement et arrêter le déroulement du code javascript en attendant la réponse (comme une confirm box, qui est laide comme un poux).
Mais cela en vaut la peine pour pouvoir styliser la modale...

Bonus : Pour ceux qui chercheraient à faire fonctionner une Bootstrap Modal, et qui n'auraient pas besoin de transporter des données, et parce que je vois souvent cette question posée : Vous pouvez savoir quel choix a fait l'utilisateur en interceptant ailleurs dans la feuille le bouton cliqué :

Code :

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

1
2
3
4
 
        $('#Ouibtn').on("click", function (e) {
 
        });

Merci