Discussion :

[encoremoi21258]

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.



Par exemple ceci:



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



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

Code html :

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

1
2
3
<div class="henchs" id="henchs">
 
</div>

Et j'y met le contenu comme ça:

Code :

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

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

[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 :

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

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

ça ne fonctionne pas ...

[psychadelic]

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???


donc stp, tu peux reformuler ta séquence, parce que la c'est franchement difficile à comprendre...

[encoremoi21258]

Bonsoir,

Voici quelques précisions:

J'ai la page principale qui contient cette div:



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).

[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.

[encoremoi21258]

Oui, vous avez compris le problème.

J'ai utilisé "on":



La modale s'ouvre à nouveau:



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 ...

[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.