11486 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

j'utilise un modal de Bootstrap dans une page web, tout fonctionne...

Mais je voudrais exécuter du javascript lorsque je ferme le modal, dans un certain cas.

Il existe des évènements prévus (hide.bs.modal et hidden.bs.modal) qui sont déclenchés après l'exécution dans le code Js de $("#modal-container").modal('hide'); par exemple, mais ces évènements ne sont pas déclenchés si l'utilisateur fait:
- Echap
- Click hors du modal
- Click sur la X de fermeture dans le modal
et moi je voudrais écouter ces évènements ...
Salut,
Peux-tu montrer ton code ? Parce qu'à priori, il n'y a pas de raison pour que cela ne fonctionne pas.
Ostara a écrit :
Salut,
Peux-tu montrer ton code ? Parce qu'à priori, il n'y a pas de raison pour que cela ne fonctionne pas.


ça serait long de synthétiser le code ici mais en gros je crée un modal et un écouteur

	
var $modalCreation =  $("#modal-message-creation");


je l'invoque et je créé un écouteur
	
$modalCreation.modal();

$modalCreation.on('hidden.bs.modal', function (e) {
	console.log('je cache le modal');
})


si j'exécute $modalCreation.modal('hide'); le console.log apparaît, si je ferme la fenêtre dans le navigateur par l'un des trois modes, le console?log ne s'exécute pas..
Ostara a écrit :
Alors si tu ne veux pas montrer ton code, ça va être difficile de t'aider. Parce que dans cet exemple, ça fonctionne : https://codepen.io/ostara/pen/wvMLQgY?editors=1011


c'est pas que je veux pas montrer mon code mais il est très long et je ne sais pas par quel bout le prendre pour le condenser Smiley smile
Je vais examiner ton code pen et comparer avec ce que j'ai fait et peut-être ça va me montrer une erreur que j'ai faite.

Je te tiens au courant et encore merci d'avoir pris la peine de me répondre.
Déjà toi tu créé entièrement le modal en Js.
moi il est créé en html à la fin du document avec un modal-body vide, je le charge avec .modal() et je remplis le modal-body avec le résultat d'une requête Ajax, les conditions sont différentes.
C'est bien pour ça qu'on a besoin de voir ton code. Smiley smile
Isole simplement la partie html de la modal et le code js qui la construit.

J'ai modifié le code pour correspondre à ce que tu dis, mais ça ne pose pas plus de problème. Montre le contenu de ton ajax, le problème vient peut-être de là.
Modifié par Ostara (30 Jul 2020 - 21:01)
Ostara a écrit :
C'est bien pour ça qu'on a besoin de voir ton code. Smiley smile
Isole simplement la partie html de la modal et le code js qui la construit.

J'ai modifié le code pour correspondre à ce que tu dis, mais ça ne pose pas plus de problème. Montre le contenu de ton ajax, le problème vient peut-être de là.


je vais essayer de faire un condensé... d'ici demain ..

encore merci pour ta patience....
Modérateur
Hello,
Je viens de faire le test sur la doc de bootstrap directement en ajoutant le script dans la console et ça fonctionne bien que ça soit esc, click sur backdrop, la croix…
Est-ce que ta fonction est enregistrée au bon moment ?
Yordi a écrit :
Hello,
Je viens de faire le test sur la doc de bootstrap directement en ajoutant le script dans la console et ça fonctionne bien que ça soit esc, click sur backdrop, la croix…
Est-ce que ta fonction est enregistrée au bon moment ?


Merci à toi..

Oui mais dans le modal est ce que tu affiches dynamiquement des données depuis une base de données, avec Ajax, avec des mises à jour ou des suppressions de données, toujours en Ajax ?? Smiley cligne
j'ai remarqué aussi que dans ce contexte, ESC ne fonctionne plus pour fermer le modal ...
Modifié par lionel_css3 (01 Aug 2020 - 09:14)
Modérateur
Hello, oui je l'ai déjà fait par le passé sans problème dans d'autres projets. Est-ce que tu es certains d'update uniquement le contenu de la modal et pas plus ? Je dirai que l'élément .modal est "bindé" et peu importe si son contenu change ou pas. Tu peux toujours faire un exemple simple sur codepen ou autre pour qu'on regarde à ça ensemble Smiley smile