divers problemes Ajax

**Assimil** · 13/08/2007, 14h40

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

**Assimil** · 14/08/2007, 12h24

Donc personne ne peut m'aider ne serait-ce que sur un seul de ces problemes ?

**highman** · 16/08/2007, 10h03

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!

**Assimil** · 16/08/2007, 10h33

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

**highman** · 16/08/2007, 11h58

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
}

**Assimil** · 16/08/2007, 13h51

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

divers problemes Ajax [MooTools]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager