IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

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


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2011
    Messages
    273
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2011
    Messages : 273
    Par défaut Contenu chargé via AJAX, script ne s'applique pas
    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.

    Nom : 1.png
Affichages : 1560
Taille : 14,8 Ko

    Par exemple ceci:

    Nom : 2.png
Affichages : 1530
Taille : 33,0 Ko

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

    Nom : 3.png
Affichages : 1563
Taille : 39,2 Ko

    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

  2. #2
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2011
    Messages
    273
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2011
    Messages : 273
    Par défaut
    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 ...

  3. #3
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    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...

  4. #4
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2011
    Messages
    273
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2011
    Messages : 273
    Par défaut
    Bonsoir,

    Voici quelques précisions:

    J'ai la page principale qui contient cette div:

    Nom : a.png
Affichages : 1413
Taille : 42,2 Ko

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

  5. #5
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    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.

  6. #6
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2011
    Messages
    273
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2011
    Messages : 273
    Par défaut
    Oui, vous avez compris le problème.

    J'ai utilisé "on":

    Nom : b.png
Affichages : 1422
Taille : 16,8 Ko

    La modale s'ouvre à nouveau:

    Nom : c.png
Affichages : 1383
Taille : 40,4 Ko

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

  7. #7
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    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.

Discussions similaires

  1. Réponses: 2
    Dernier message: 14/04/2010, 17h08
  2. Problème très étrange !
    Par _SamSoft_ dans le forum Débuter
    Réponses: 3
    Dernier message: 15/09/2007, 17h44
  3. Réponses: 5
    Dernier message: 12/07/2007, 10h07
  4. problème très étrange avec mes tableaux
    Par lelutin dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 08/09/2006, 14h47
  5. Problème très étrange...
    Par TitiFr dans le forum Requêtes
    Réponses: 4
    Dernier message: 31/03/2005, 21h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo