ajax history plugin

Version imprimable

ajax history plugin

Tout d'abord bonjour à tout le monde et d'avance merci à toutes les personnes qui pourront éventuellement m'apporter de l'aide.

Je tiens à signaler que je n'ai jamais programmé en ajax, donc soyez un peu indulgent...
Actuellement je commence à développer un site avec de l'ajax (j'ai bien pesé le pour et le contre, donc s.v.p. pas de morale sur le référencement, etc.) pour mon entreprise où je suis employé .
Le point négatif qui me dérangeait le plus était la gestion inexistante de l'historique par le browser(bookmark, bouton précédent,... inopérant).
Après d'énormes recherches sur le web j'ai trouvé un exemple qui marche parfaitement en ligne avec presque tous les navigateurs. Voici la page de test pour ceux que ça intéresse:

http://www.mikage.to/jquery/jquery_history.html.

voici le code de la page :

Code:

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
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>history plugin</title>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="jquery.history.js"></script>
	<script type="text/javascript">
        // PageLoad function
        // This function is called when:
        // 1. after calling $.historyInit();
        // 2. after calling $.historyLoad();
        // 3. after pushing "Go Back" button of a browser
        function pageload(hash) {
                // hash doesn't contain the first # character.
                if(hash) {
                        // restore ajax loaded state
                        $("#load").load(hash + ".html");
                } else {
                        // start page
                        $("#load").empty();
                }
        }
        
        $(document).ready(function(){
                // Initialize history plugin.
                // The callback is called at once by present location.hash. 
                $.historyInit(pageload);
                
                // set onlick event for buttons
                $("a[rel='history']").click(function(){
                        // 
                        var hash = this.href;
                        hash = hash.replace(/^.*#/, '');
                        // moves to a new page. 
                        // pageload is called at once. 
                        $.historyLoad(hash);
                        return false;
                });
        });
        </script>
</head>
<body>
	This plugin helps you make your Ajax-driven page available for "Go Back" button and "bookmark" of browser.<br>
	source: <a href="jquery.history.js">jquery.history.js</a> (Last Update: 2009/03/20)<br>
	<br>
	Work on IE8, FireFox 4.0, Opera9, Safari 4.0, Chrome 1.0. <br>
	<br>
	Safari support & bug fix on IE6 was offered by Lincoln Cooper. Thanks.
	<br>
	Fix IE6 problem was offered by Anton. Thanks.
	<br>
	Support IE8 was offered by Yohann MARTEL. Thanks.
	<hr>
	Ajax load<br>
	<a href="#1" rel="history">load 1</a><br>
	<a href="#2" rel="history">load 2</a><br>
	<a href="#3" rel="history">load 3</a><br>
 
	<hr>
	Loaded html:<br>
	<div id="load"></div>
	<hr>
<a href="/">mikage's page. (Japanese)</a>
</body>
</html>

Voici mon problème, quand je teste en local cela ne fonctionne pas !!
J'utilise WAMP 2 comme platte forme de développement. Pour faire mes tests j'ai une page nommée index.html (même structure que le code au dessus) dans laquelle j'ai bien inclus les deux fichiers.js nécessaire (jquery-1.3.2.min.js et jquery.history.js) et j'ai mes liens (balise <a>).
J'ai une autre page test.html dans laquelle se trouve par exemple une balise <div id="toto">blabla</div>contenant le texte à insérer dynamiquement dans ma page index.html.
Voici la syntaxe exacte de ma balise <a>se trouvant sur la page index.html pour atteindre et insérer le texte contenu dans l'ancre :

<a href="test.html#toto">test1</a> et malheureusement qd je clique sur le lien "test1" il ne se passe rien, le texte "blabla" ne s'affiche pas dans le div "load".
Je tourne en rond depuis un certain temps et n'y connaissant pas grand-chose, je m'adresse à vous.
D'avance un grand merci à toutes personnes pouvant m'éclairer.

09/04/2009, 08h23
andry.aime

Salut, tu devras mettre l'attribut rel="history" dans ton lien.

Code:

<a href="test.html#toto rel="history"">test1</a>
09/04/2009, 09h14
Romanous35

Bonjour Andry,
oui effectivement mais je l'avais déjà mis dans ma page de test, mais ça marche qd même pas. J'avais oublié de le mettre l'attribut dans mon lien en recopiant, la fatigue sans doute, désolé.
Merci quand même...
Une autre idée ?
09/04/2009, 09h21
andry.aime

:D Oublier de te dire bienvenue sur le forum
On peut voir le code de la page test?

Re Bonjour et merci,

je viens de recommencer mes deux pages de test pour vous donner le code et voilà que maintenant ça marche nikel !!
Je n'y comprend vraiment plus rien, p-e un problème avec WAMP...
Enfin merci quand même bcp pour l'aide apporté et voici le code des deux pages de test :

Code:

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
index.html:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>history plugin</TITLE>
<META content="text/html; charset=UTF-8" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="library/jquery-1.3.2.min.js"></SCRIPT>
 
<SCRIPT type=text/javascript src="library/jquery.history.js"></SCRIPT>
 
<SCRIPT type=text/javascript>
	// PageLoad function
	// This function is called when:
	// 1. after calling $.historyInit();
	// 2. after calling $.historyLoad();
	// 3. after pushing "Go Back" button of a browser
	function pageload(hash) {
		// hash doesn't contain the first # character.
		if(hash) {
			// restore ajax loaded state
			$("#load").load(hash + ".html");
		} else {
			// start page
			$("#load").empty();
		}
	}
 
	$(document).ready(function(){
		// Initialize history plugin.
		// The callback is called at once by present location.hash. 
		$.historyInit(pageload);
 
		// set onlick event for buttons
		$("a[rel='history']").click(function(){
			// 
			var hash = this.href;
			hash = hash.replace(/^.*#/, '');
			// moves to a new page. 
			// pageload is called at once. 
			$.historyLoad(hash);
			return false;
		});
	});
	</SCRIPT>
 
<META name=GENERATOR content="MSHTML 8.00.6001.18702">
</HEAD>
<BODY>
Ajax load<BR>
<A href="test1.html#test1" rel="history">Test1</A><BR>
<A href="test2.html#test2" rel="history">Test2</A><BR>
<A href="test3.html#test3" rel="history">Test3</A><BR>
<HR>
Loaded html:<BR>
<DIV id=load></DIV>
<HR>
</BODY></HTML>
 
test1.html :
 
<div id="test1">
	TEST1 blabla blabla blabla blabla
</div>

Voilà, donc maintenant ça marche !