Contenu chargé via AJAX, script ne s'applique pas

Version imprimable

3 pièce(s) jointe(s)

Bonjour,

J'ai une page avec des cases à cocher et un champ de recherche. En fonction de ce qu'on en fait il y a du contenu qui s'affiche à droite.

Pièce jointe 366062

Par exemple ceci:

Pièce jointe 366066

Et si on clique dessus, une modale s'ouvre:

Pièce jointe 366070

Sur la page de recherche j'ai une div comme ça:
Code:

1 2 3 <div class="henchs" id="henchs"> </div>
Et j'y met le contenu comme ça:
Code:

1 2 3 4 5 6 7 8 9 $.ajax({ type: "POST", url: "views/listehenchs.php", data: { partiedunomduhench: nomhench }, success: function(msg) { alert (msg); document.getElementById('henchs').innerHTML = msg; } });
Le problème est que le contenu s'affiche bien que je met le code directement dans la div, ou que je l'y met via AJAX, mais quand je le met via AJAX, la modale ne s'ouvre pas si on clique dessus et il n'y a aucun message d'erreur.

Je ne comprend vraiment pas, c'est pas logique ...

Une idée ?

Merci d'avance

30/03/2018, 19h30
encoremoi21258

Le problème vient du fait que l'ouverture de la modale est faite par un événement jquery, et comme le contenu sur lequel l'événement doit se faire est chargé par la suite, via AJAX, ça ne fonctionne pas. Et je ne sais pas coutourner le problème ...

Même

Code:

$( "#henchs" ).load( "views/listehenchs.php" );

ça ne fonctionne pas ...
30/03/2018, 21h00
psychadelic

Citation:

Le problème est que le contenu s'affiche bien que je met le code directement dans la div, ou que je l'y met via AJAX, mais quand je le met via AJAX, la modale ne s'ouvre pas si on clique dessus et il n'y a aucun message d'erreur.

Je ne comprend vraiment pas, c'est pas logique ...

traduction stp:

Le problème est que le contenu s'affiche [a droite];

=> donc ça marche !

bien que je mette le code directement dans la div,

pourquoi vouloir mettre du code dans quelle div ? une div en bas, à gauche, au miliieu, pour effacer le contenu qui s'affiche à droite ??

c'est incompréhensible...

ou que je l'y met [quoi, ou ?] via [un appel] AJAX,
pourquoi faire ? c'est un autre appel ajax qui se lance apres ?

mais quand je le met via AJAX, la modale ne s'ouvre pas si on clique dessus et il n'y a aucun message d'erreur.
le bouton de la "modale", je suis prêt à parier qu'il arrive dans l'affichage généré par l'appale Ajax???
:roll:

donc stp, tu peux reformuler ta séquence, parce que la c'est franchement difficile à comprendre...
30/03/2018, 21h59
encoremoi21258

1 pièce(s) jointe(s)

Bonsoir,

Voici quelques précisions:

J'ai la page principale qui contient cette div:

Pièce jointe 366100

Dans cette div s'affiche le résultat de la recherche provoquée soit par le cochage/décochage des cases, soit par le champ de recherche.

Ce que j'ai dis c'est que le rectangle qui correspond au résultat de la recherche (le rectangle avec le genre de rhinocéros debout) est bien affiché si je met son code manuellement dans la div sur la page principale, ou si je l'y met via AJAX. SAUF que l'événement jquery qui provoque l'ouverture de la modale quand on clique sur ce rectangle ne s’exécute QUE si le rectangle avec le rhinocéros debout s'affiche via l'insertion manuelle de son code sur la page principale. Si ce rectangle avec le rhinocéros debout est affiché car il a été ajouté dans la div via AJAX, l'événement ne s'exécute pas.

Je n'ai jamais parlé de contenu à effacer ... d'où vous sortez ça ?

Il n'y a qu'un seul appel AJAX par case cochée ou décochée. Et cet appel AJAX permet de mettre à jour ce qui est affiché à droite (le rectangle avec le genre de rhinocéros debout).
30/03/2018, 22h30
psychadelic

Dans ton code, tu projette de placer du "code html' à l'intérieur de ce div, ayant pour ID="henchs".

le principe, c'est que dans cette div#henchs, en utilisant une commande ajax pour le remplir, le navigateur sait uniquement prendre en compte que le code html, et il ignorera tout le code javascript que tu peut lui placer dedans, pour lui c'est un truc inutile et superflu, comme une sorte de commentaire.
30/03/2018, 22h47
encoremoi21258

2 pièce(s) jointe(s)

Oui, vous avez compris le problème.

J'ai utilisé "on":

Pièce jointe 366112

La modale s'ouvre à nouveau:

Pièce jointe 366113

Mais il y a plusieurs problèmes:
1) L'opacity (on voit le bout de code sur l'image) de tout ce qui se trouve autour de la modale n'est pas à 1 lorsqu'elle s'ouvre
2) Le clique sur la croix en haut à droite de la modale ne provoque pas sa fermeture, alors que si je le fais sans afficher la rectangle avec le rhinocéros via une requête AJAX, ça provoque la fermeture de la modale
3) Si je clique ailleurs que sur la modale, par exemple dans le menu, la modale ne se ferme pas, alors que si je le fais sans afficher la rectangle avec le rhinocéros via une requête AJAX, ça provoque la fermeture de la modale

A mon avis il y a trop de "communications" entre le contenu présent au départ, et celui ajouté via AJAX ...

Mais pourtant AJAX semble être la seule chose qui permet de mettre à jour le contenu à droite, en fonction des cases cochées et décochées ... car en faite ça fait pas mal de requêtes SQL aussi, c'est pas un simple changement de valeurs. D'où l'utilisation d'une page PHP qui est chargée dans la div nommée "henchs".

Dans le pire des cas si je ne trouve pas et que vous n'avez pas de solution je provoque une modification de l'URL de la page avec les cases cochées et décochées, et une fois qu'on a coché/décoché ce qu'on veut, on clique sur un bouton qui recharge la page, et affiche le contenu à droite en fonction des paramètres dans l'URL. J'avais choisis AJAX car cela permet une mise à jour en temps réelle, sans rechargement régulier de page ...
30/03/2018, 23h26
psychadelic

L'utilisation d'Ajax n'est pas limité au chargement partiel de la page.
tu peux aussi l'utiliser pour envoyer des "ordres" au serveur, et / ou en récupérer des information, via des requetes json.

Pareil quand tu demande le chargement d'une partie de ta page, tu peux appeler une page php qui composera tes données html sur mesure et suivant le contexte du moment.

Mais attention, tout cela est asynchrone,
il s'écoule du temps entre une demande Ajax et sa réponse, ce qui peut impliquer par exemple de "bloquer" un bouton pour éviter qu'un utilisateur le fasse 36 fois si sa connexion est trop lente;

à une gestion plus complexe en via les promesses, pour que choses s’enchaînent proprement dans le bon ordre,
car bien sur si tu envoie 2 requetes l'une apres l'autre, l'ordre d'arrivée peut être aléatoire.

Ah et j'oubliais, il faut aussi gérer les problème de cache, dans le cas ou une requete identique peut renvoyer un résultat différent suivant l'évolution du contexte, parce les systemes sont tous optimisés pour renvoyer une réponse identique à une question identique, même si c'est 1/4 d'heure plus tôt. en jQuery faut juste mettre le cache;false; et c'est assez simple.

Voila avec ça tu dois avoir toute la panoplie des trucs à savoir pour gérer de l'Ajax.
30/03/2018, 23h47
encoremoi21258

Je vous remercie pour ces explications.

J'ai même remarqué que maintenant que j'utilise le "on", l'événement ne fonctionne plus à d'autres endroits où je n'utilise pas de chargement de contenu via AJAX ... Ça a vraiment l'air sans issue ...

En plus de l'impossibilité d'accéder, à partir du contenu chargé via AJAX, à un élément qui était déjà présent auparavant ...

S'il n'y aurait qu'un rectangle à afficher à droite il y aurait une solution, je pourrais placer l'ensemble des div vides à droite, récupérer le texte à mettre dedans via AJAX, et le placer dedans. Il n'y aurait ainsi aucun soucis de DOM. Mais le nombre de ces rectangles peut énormément varier, et même la class d'une div varie en fonction de ce qui est dedans ...
31/03/2018, 01h39
psychadelic

Citation:

Envoyé par encoremoi21258

J'ai même remarqué que maintenant que j'utilise le "on", l'événement ne fonctionne plus à d'autres endroits où je n'utilise pas de chargement de contenu via AJAX ... Ça a vraiment l'air sans issue ....

Oui, vaut mieux avoir un peu d'ordre pour éviter de lier plusieurs fois le même élément sur le même event, qu'il soit codé de manière directe et indirecte: un interpréteur c'est toujours très discipliné.
02/04/2018, 01h07
encoremoi21258
Bonsoir,

J'ai "résolu" le problème avec un petit bidouillage ...
Code:

1 2 3 4 $( "#henchs" ).load( "views/listehenchs.php?"+urlrecue ); setTimeout(function(){ $.getScript("js/script.js"); }, 400)
Je charge le contenu à droite, j’attends 400 millisecondes, et je recharge la page des scripts.

Il y aura toujours relativement peu de scripts du coup ça n'a aucun effet négatif de le recharger. A mon avis c'est la seule solution vu qu'avec la solution du "on" en jquery ça ne fonctionne pas totalement comme il faut à cause des "accès" entre le contenu chargé et celui initialement présent, et que d'autres trucs ailleurs sur le site qui utilisent le même événement ne fonctionnent alors plus.

Bon par contre au niveau du référencement c'est pas top de faire ça ...

Je vous remercie pour votre aide, grâce à cette petite discussion j'ai bien mieux compris ce que c'est et comment ça fonctionne avec cette histoire de DOM. Il vaut mieux utiliser cette solution pour charger peu de choses, du contenu statique. Par exemple un message d'erreur qui se met dans une div sans que la page se recharge. Chez moi ça a l'air d'être beaucoup de choses ...

En tout cas ça fonctionne comme je le voulais.

Bonjour,
ce que tu fais est peut-être la pire des solutions, il n'y a aucune raison que la délégation d'événement ne fonctionne pas sauf si erreur dans le script.
Au passage as tu regardé, en détail, la documentation sur jQuery.load() ?

• De ce que j'ai vu dans le code que tu nous propose, via une image ce qui est la pire façon de faire :aie:
Code:

1 2 3 4 5 6 $("#henchs").on("click",".open-modal", function(){ // ... if(element){ //... } })
que vaut element !?!

• Dans une autre partie de ton code
Code:

1 2 3 4 5 6 7 8 9 $.ajax({ type: "POST", url: "views/listehenchs.php", data: { partiedunomduhench: nomhench }, success: function(msg) { alert (msg); document.getElementById('henchs').innerHTML = msg; } });
que viens faire un document.getElementById dans du code jQuery.

Citation:

J'ai "résolu" le problème avec un petit bidouillage ..

Je pense que c'est pour ces raisons, entre d'autres sûrement, que tu es obligé de « bidouller », impose toi plus de rigueur ;)

05/04/2018, 23h04
encoremoi21258
Bonsoir,
Code:

1 2 $(document).ready(function () { var element;
Code:

1 2 3 $("header .group .big-name, .open-modal").click(function () { element = $(this);
D'après ce que je comprend, quand on clique pour ouvrir la modale, element est égal à l'objet où on a cliqué dessus.

La délégation d'événement fonctionne +/-, mais quand on ferme la modale on peut soit cliquer sur la croix en haut à droite de celle-ci, ce qui fait qu'un accès doit se faire du contenu chargé en AJAX, vers celui présent initialement afin de retirer l'opacité. Soit on clique sur le contenu présent initialement, et donc l'accès doit se faire dans le chemin inverse pour fermer la modale.

document.getElementById sert à afficher dans une div ce qui est retourné par la page views/listehenchs.php
05/04/2018, 23h47
psychadelic

document.getElementById c'est du Javascript
et $(...) c'est du jQuery.
ce sont tout deux des moyen pour pointer un objet de ta page html

tu peux bien sur mixer les 2, mais en général on ne mélange pas ces 2 manières de pointer sur les éléments.

à partir du moment ou ton code utilise la bibliothèque jQuery, alors l'ensemble du code est censé l'utiliser.

Avec juste ces 2 lignes ton code est tres dérangeant pour le programmeur que je suis:
- écrire cette affectation dynamique : element = $(this); n'est pas vraiment orthodoxe, et c'est le meilleur moyen pour "se mélanger les pinceaux" par la suite ;)

- idem pour $("header .group .big-name, .open-modal").click(..
déjà j'imagine mal qu'on puisse placer une virgule dans ce genre d'affectation, et je ne veux même pas le tester.
ensuite je vois pas pourquoi les éléments correspondants à "header .group .big-name" et ".open-modal" pourraient partager le même code, ça donne d'emblée l'impression d'un grand fouillis.. :?

Citation:

Envoyé par psychadelic

document.getElementById c'est du Javascript
et $(...) c'est du jQuery.
ce sont tout deux des moyen pour pointer un objet de ta page html

jQuery n'est jamais que du javascript !

Quant à :

document.getElementById retourne un élément du DOM
$(...) retourne une collection d'objets jQuery.

Citation:

Envoyé par psychadelic

- écrire cette affectation dynamique : element = $(this); n'est pas vraiment orthodoxe, et c'est le meilleur moyen pour "se mélanger les pinceaux" par la suite ;)

C'est plutôt une bonne pratique que de mettre en cache un élément que l'on va réutiliser cela évite de faire des allers/retours inutiles dans la fonction.

Citation:

Envoyé par psychadelic

- idem pour $("header .group .big-name, .open-modal").click(..
déjà j'imagine mal qu'on puisse placer une virgule dans ce genre d'affectation, et je ne veux même pas le tester.

C'est tout à fait faisable la virgule sépare simplement les différents sélecteurs.

Citation:

Envoyé par psychadelic

ensuite je vois pas pourquoi les éléments correspondants à "header .group .big-name" et ".open-modal" pourraient partager le même code, ça donne d'emblée l'impression d'un grand fouillis.. :?

Rien n'interdit de mettre la même action sur plusieurs éléments de ta page.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html lang="FR"> <head> <meta charset="UTF-8"> <title>jQuery Demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <h1>Titre</h1> <h2>Titre</h2> <h3>Titre</h3> <script> $("h1, h2, h3").on("click", function() { $(this).css("border", "1px solid red"); }); </script> </body> </html>
Citation:

Envoyé par encoremoi21258

La délégation d'événement fonctionne +/-, mais quand on ferme la modale on peut soit cliquer sur la croix en haut à droite de celle-ci, ce qui fait qu'un accès doit se faire du contenu chargé en AJAX, vers celui présent initialement afin de retirer l'opacité. Soit on clique sur le contenu présent initialement, et donc l'accès doit se faire dans le chemin inverse pour fermer la modale.

J'ai vraiment du mal à comprendre ce que tu essaies d'expliquer :oops:
• Appui sur la croix on fait une requête ???
• Autre ????

07/04/2018, 19h26
psychadelic

Citation:

Envoyé par NoSmoking

Citation:

Envoyé par psychadelic

- écrire cette affectation dynamique : element = $(this); n'est pas vraiment orthodoxe, et c'est le meilleur moyen pour "se mélanger les pinceaux" par la suite

C'est plutôt une bonne pratique que de mettre en cache un élément que l'on va réutiliser cela évite de faire des allers/retours inutiles dans la fonction.

Je n'aurais rien eu à dire si cette variable avait été déclarée dans la fonction même, mais la il s'agit d'une variable globale qui est en dehors de la fonction.
en plus cette fonction récupère son pointeur vis le this d'un clic souris pouvant provenir de multiples éléments de la page, il est donc réaffecté de multiples fois sur des éléments différents à chaque clic.
13/04/2018, 07h19
Invité

Bonjour,

@encoremoi21258

Code:

document.getElementById('henchs').innerHTML = msg;

s'écrit en syntaxe** jQuery :

Code:

$('#henchs').html( msg );

**(double-Asterix) : je précise, pour éviter que NoSmoking me tombe dessus Abraracourcix! ;)
11/05/2018, 02h00
psychadelic

je ne prétends pas tout savoir sur jQuery ou JavaScript, mais je fais beaucoup de maintenance de code, et j'ai vu beaucoup d’horreurs dans la manière de coder et des effets désastreux que cela entraîne, pas seulement pour corriger les Buggs ou on finit par perdre un temps fou sur ce type de parties de codes immondes, mais aussi en cas d'évolution et qu'on se retrouve à devoir réécrire ces parties en principes fonctionnelles, mais qui empêchent l'intégration de nouveau code et qui finissent par devoir tout réécrire.

Alors désolé, mais je considère (et je ne suis pas le seul) qu'affecter une fonction jQuery à des éléments de classes différentes est le meilleur moyen de pourrir la vie de ceux qui devront repasser sur le code.
S'il veut réellement affecter cette fonction à tout un ensemble d'éléments, alors il faut leur ajouter une nouvelle classe pour les identifier, même s'il ne correspond aucun css à cette classe.

Sinon, merci de reconnaître qu'il m'arrive de donner de bons conseils, mais j'ai TRES rarement un simple merci.
Quand au pouces positifs on oublie, ici le système fonctionne principalement par les points négatifs à la moindre incartade, par exemple comme ici pour juste avoir fait remarquer que l'utilisation de la variable globale "element" n'est pas des plus heureuse, surtout de la part de NoSmoking qui ici, encore une fois, détourne le sens de mon message initial.
D'ailleurs il me donne vraiment l'impression de systématiquement chercher la petite bête dans mes messages, et j'aimerai bien qu'il me fasse une réponse à mon dernier message privé.
11/05/2018, 08h41
Invité

Je mets parfois des :moinsser: pour attirer l'attention et faire circuler le sang jusqu'aux tempes... :furax:
Mais je sais, par expérience, que c'est très désagréable.

Aussi, généralement, une fois le message lu et compris, je les supprime (ce que j'ai fait ici).

Et puis.... Parfois je suis gentil :ange:, parfois je joue les méchants... :evil:
Ça évite la routine !