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

Bibliothèques & Frameworks Discussion :

divers problemes Ajax [MooTools]


Sujet :

Bibliothèques & Frameworks

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    92
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 92
    Par défaut divers problemes Ajax
    Bonjour à tous,

    Je vien a vous, car j'ai décidé d'utiliser Ajax sur un des projets sur
    lesquelles je travaille.

    Le probleme, c'est qu'avants de commencer je n'avais aucune notion de
    JavaScript.

    Pour me faciliter le travail, j'ai donc fait appel à la librairie
    Mootools pour me décharger un peut.

    mon organistion est la suivante : le site fonctionne avec et sans ajax.
    Toute les page sont généré avec le fichier page.php

    le get id donne la page qui nous interresse, et le get ajax détermine si
    la page est appelé en ajax ou non.

    se qui fait que sans javascript la page est appellé comme ça :
    page.php?id=1&ajax=0

    et avec javascript comme ça :
    page.php?id=1&ajax=1

    en fonction de $_GET['ajax'], page.php retourne la totalité de la page,
    ou ne retourne que le contenu de la div du contenu.

    voici un exemple de code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <script type="text/javascript" src="mootools.js"></script>
        <title>exemple</title>
      </head>
     
      <body>
     
        <div id="menu_racine">
          <ul>
            <li><a href="page.php?id=1&ajax=0" id="lien_racine_1">Lien 1</a></li>
            <li><a href="page.php?id=2&ajax=0" id="lien_racine_2">Lien 2</a></li>
          </ul>
        </div>
     
        <div id="menu_secondaire">
          <ul>
            <li><a href="page.php?id=3&ajax=0" id="lien_sec_3">Lien 3</a></li>
            <li><a href="page.php?id=4&ajax=0" id="lien_sec_4">Lien 4</a></li>
          </ul>
        </div>
     
        <div id="corp">
     
    	<h1>titre ici</h1>
     
    	<p>un peut de contenu</p>
     
    <script type="text/javascript">
    //<![CDATA[
     
    $('lien_racine_1').addEvent('click', function(e) {
     
      e = new Event(e).stop();
     
      var urlpage = "page.php?id=1&ajax=1";
      var urlsec = "menusecondaire.php?id=1";
      var corp = $('corp').empty().addClass('ajax-loading');
      var sec = $('menu_secondaire').empty().addClass('ajax-loading');
     
      new Ajax(urlpage , {
        method: 'get',
        update: $('corp'),
        onComplete: function() {
          corp.removeClass('ajax-loading');
        }
      }).request();
     
      new Ajax(urlsec, {
        method: 'get',
        update: $('menu_secondaire'),
        onComplete: function() {
          sec.removeClass('ajax-loading');
        }
      }).request();
     
    });
     
    $('lien_racine_2').addEvent('click', function(e) {
     
      e = new Event(e).stop();
     
      var urlpage = "page.php?id=2&ajax=1";
      var urlsec = "menusecondaire.php?id=2";
      var corp = $('corp').empty().addClass('ajax-loading');
      var sec = $('menu_secondaire').empty().addClass('ajax-loading');
     
      new Ajax(urlpage , {
        method: 'get',
        update: $('corp'),
        onComplete: function() {
          corp.removeClass('ajax-loading');
        }
      }).request();
     
      new Ajax(urlsec, {
        method: 'get',
        update: $('menu_secondaire'),
        onComplete: function() {
          sec.removeClass('ajax-loading');
        }
      }).request();
     
    });
     
    $('lien_sec_3').addEvent('click', function(e) {
     
      e = new Event(e).stop();
     
      var urlpage = "page.php?id=3&ajax=1";
      var urlsec = "menusecondaire.php?id=3";
      var corp = $('corp').empty().addClass('ajax-loading');
      var sec = $('menu_secondaire').empty().addClass('ajax-loading');
     
      new Ajax(urlpage , {
        method: 'get',
        update: $('corp'),
        onComplete: function() {
          corp.removeClass('ajax-loading');
        }
      }).request();
     
      new Ajax(urlsec, {
        method: 'get',
        update: $('menu_secondaire'),
        onComplete: function() {
          sec.removeClass('ajax-loading');
        }
      }).request();
     
    });
     
    $('lien_sec_4').addEvent('click', function(e) {
     
      e = new Event(e).stop();
     
      var urlpage = "page.php?id=4&ajax=1";
      var urlsec = "menusecondaire.php?id=4";
      var corp = $('corp').empty().addClass('ajax-loading');
      var sec = $('menu_secondaire').empty().addClass('ajax-loading');
     
      new Ajax(urlpage , {
        method: 'get',
        update: $('corp'),
        onComplete: function() {
          corp.removeClass('ajax-loading');
        }
      }).request();
     
      new Ajax(urlsec, {
        method: 'get',
        update: $('menu_secondaire'),
        onComplete: function() {
          sec.removeClass('ajax-loading');
        }
      }).request();
     
    });
     
    //]]>
    </script>
     
        </div>
     
      </body>
    </html>
    Précision : le JS est dans la div corp, qui est mis à jour. il se met a jour en fonction des sous menu de la page.

    Mes problemes sont les suivants :

    Quand le client navigue sur le site en ajax, si jamais il veut revenir
    en arriere avec les fleches du navigateurs, celles ci le redirige vers
    la dernière requette non ajax. Ce qui fait que la navigation dans le
    site est bien moin ergonomique à mon sens. Est il possible d'écrire dans
    l'historique en javascript ? le site fonctionnant a la foit avec et sans
    ajax, celà permetrait à la personne de revenir en arriere, meme en
    chargent toute la page, mais au moin, correctement.

    Dans la meme vene, avec les requette ajax, l'url n'est pas changé,
    résultat, si la personne qui navigue veut faire un copier coller de
    l'url de la page qui l'interresse, celà ne la redirigera pas du tout sur
    la ressource qui l'interresse pour peut qu'elle ai navigué un peut grace
    à Ajax avant... Et de plus, si elle actualise, elle ne fera
    qu'actualiser la page avant les requette ajax. est il possible de palier
    à ça aussi ?

    autre probleme : certaines page ont besoin d'appeler un javascript
    spécifique, que je ne peut inclure systématiquement. Cepandant, quand le
    javascript a été inclut en Ajax, il ne fonctionne pas... Y aurait il une
    solution à ça aussi ?

    Je vous remerci beaucoup par avance, car je galaire depuis un moment sur
    tout ces problemes...

  2. #2
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    92
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 92
    Par défaut
    Donc personne ne peut m'aider ne serait-ce que sur un seul de ces problemes ?

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    188
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Bas Rhin (Alsace)

    Informations forums :
    Inscription : Mars 2006
    Messages : 188
    Par défaut
    Je peux t'aider sur le dernier problème ! Comme charger une page via Ajax revient a ne pas recharger la page, le code javascript (contenu entre les balises <script></script> ?) ne peut pas être executé !

    Une solution reviendrait à executer ton code directement à la fin de ta requete Ajax, quand tu reçois la réponse.

    Pour les autres problemes je ne vois pas trop...

    Bonne journée!

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    92
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 92
    Par défaut
    Une solution reviendrait à executer ton code directement à la fin de ta requete Ajax, quand tu reçois la réponse.
    Qu'entend tu par là ? et comment pourais-je faire ça ?

    Je te remerci pour tes précision, et m'excuse pour mon "incultance" du javascript ^^

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    188
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Bas Rhin (Alsace)

    Informations forums :
    Inscription : Mars 2006
    Messages : 188
    Par défaut
    Dans ta fonction Ajax qui recoit les donnée une fois que tu as :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    if( xhr.readyState == 4 && xhr.status == 200 ){
     
        // Traitement de la réponse 
           [...]
        // Execution de ton code
           [...]
    }
    Voila


    edit :

    dans ton cas ça serait plutot :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    onComplete : function(){
         // Execution du code
    }

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    92
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 92
    Par défaut
    Ca, je m'en doutais bien, mais comment je fait pour executer le code JS que je vien juste de récuperer en Ajax ?

    de plus, est-il possible de relancer l'execution de tout JS deja en place a la fin de la requette Ajax ? car sinon, les elements XHTML chargé en Ajax ne sont pas reconnu par le JS déjà en place...

  7. #7
    Invité de passage
    Profil pro
    Inscrit en
    Août 2007
    Messages
    1
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2007
    Messages : 1
    Par défaut
    Bonjour,

    j'ai eu le même problême avec la requête contenant du javascript qui ne s'écécutait pas en arrivéee...

    la solution est très simple, dans ta requête ajax mootools, il faut ajouter un paramètre : evalScripts: true

    et voilà

  8. #8
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    92
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 92
    Par défaut
    Génial, merci !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [debutant] divers probleme : affichage console & suivi debug
    Par blaise_laporte dans le forum Eclipse Java
    Réponses: 3
    Dernier message: 05/06/2007, 12h16
  2. divers probleme avec windows XP
    Par Zetophe dans le forum Windows XP
    Réponses: 2
    Dernier message: 27/02/2007, 06h40
  3. Divers problemes avec les liens
    Par Mystic'Angel dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 29/01/2007, 12h04
  4. Divers problemes avec appli MDI
    Par anarpunk dans le forum Langage
    Réponses: 26
    Dernier message: 27/10/2005, 17h09
  5. [LG]Divers problémes pour un programme.
    Par Horus TCT dans le forum Langage
    Réponses: 14
    Dernier message: 24/05/2003, 23h04

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