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