Ouverture d'une fenetre modal en AJAX et rechargement JS

Version imprimable

30/07/2019, 16h46
Sebasti3n

Ouverture d'une fenetre modal en AJAX et rechargement JS

Bonjour,

j'ai créer une administration ou j'ouvre des fenêtres modal(bootstrap) en ajax.
Je rencontre un problème à la deuxième ouverture d'une fenêtre le jquery / javascript n'est plus pris en charge.

Je dois du coup recharger la page complète pour quel e JS soit de nouveau fonctionnel sur la première ouverture.

Avez vous une solution ?

Merci
31/07/2019, 15h58
SpaceFrog

Tout ce qui est chargé dynamiquement ne reçoit pas les attributions d'evenements que tu as pu mettre sur le onload.

Tu dois soit attribuer avec un .on()

Code:

.on([parent], [enfant cible], [function]);

ou alors avec un .delegate()

Voila mon script

Voila mon code qui permet d'ouvrir des fenetres modal en ajax :
je dois précisé le on() ici ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
<script type="text/javascript">
$('[data-load-remote]').on('click',function(e) {
    e.preventDefault();
    var $this = $(this);
    var remote = $this.data('load-remote');
    if(remote) {
		     		$($this.data('remote-target')).load(remote);
 
    }	
 
});
</script>

31/07/2019, 23h05
ABCIWEB

Sur le principe, oui. Par contre je ne sais pas si le sélecteur $('[data-load-remote]') correspond à quelque chose de valide en jQuery. Dans la doc la syntaxe qui utilise "[]" est [name*=”value”]. Je ne peux pas non plus garantir la suite de ton code non plus, mais le principe de la fonction .on est correcte.

@SpaceFrog dans le lien que tu donnes on lit que delegate() est dépréciée au profit de .on avec une syntaxe équivalente.
01/08/2019, 08h29
SpaceFrog

en me relisant j'ai dit n'imp pour la syntaxe du on() :oops:

Je rectifie donc :

Code:

$([parent]).on([event], [enfant cible], [function]);
01/08/2019, 12h08
Sebasti3n

Précision

Bonjour,

pour moi l'ouverture des fenetres modal ajax fonctionne se qui ne fonctionne pas à partir de la deuxième ouverture c'est le javascript dans la fenêtre modal.
01/08/2019, 14h20
SpaceFrog

c'est ce que je t'explique ...
le code chargé dans la modale dynamiquement n'hérite pas des events attribués lors du chargement de la page ...
02/08/2019, 00h38
Sebasti3n

pourtant il fonctionne la première fois. du coup quelle est la solution ?
02/08/2019, 08h06
SpaceFrog

Reprenons...

Que cela fonctionne la première fois n'est pas étonnant, car le code est sur ta page au chargement, donc bénéficie des attributions d'events du onload.
Quand tu modifies le contenu, le nouveau contenu ajouté lui n'est pas passé par le onload de la page et donc n'a pas reçu les events...

Pour palier à cela il faut utiliser on() comme montré ci dessus, ou alors utiliser delegate()
02/08/2019, 09h59
Sebasti3n

j'avoue ne pas bien comprendre comment l'exploiter dans ma situation il faut que j'intègre un code dans la page appeler en ajax directement
ou que je rajoute du code dans mon script fournis plus haut ?