ajaxify et hashchange

Version imprimable

Bonjour,

j'aimerai utiliser le plugin ajaxify (http://max.jsrhost.com/ajaxify/). J'arrive à le faire fonctionner seulement, je n'arrive pas à faire fonctionner le hash.
Je n'arrive pas à modifier l'url de mon site lorsque mon contenu externe est chargé dans mon conteneur de ma page index.html.

J'ai beau essayer de suivre les instruction sur le site du plugin cependant quand je les suis rien ne marche. Je doit louper quelques chose.

voici mon code :

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
<html>
<head>
<title>Title</title>
 
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.livequery.pack.js"></script>
<script type="text/javascript" src="js/jquery.ajaxify.js"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.history.fixed.js"></script>
<script type="text/javascript" src="js/jquery.metadata.min.js"></script>
<script type="text/javascript">
$(function () {
    function ajaxify(file) {
        $('<div id="loading"></div>').html("Loading Content: " + file + " ...").appendTo('body').fadeIn();
        $.get(file, function (data) {
            $("#wrapper").slideUp('slow', function () {
                $(this).html(data).slideDown('slow', function () {
                    $('#loading').fadeOut('slow', function () {
                        $(this).remove();
                    });
                });
            });
        });
    }
    $(".ajaxify").click(function () {
        $('.ajaxify').removeClass('current');
        $(this).addClass('current');
        ajaxify($(this).attr('href'));
        return false;
    });
    ajaxify('homepage.html');
});
 
 
</script>
 
<style type="text/css">
/* CSS goes here */
/* keep this! */
#loading {display:none;} /*hide the loading element by default*/
</style>
</head>
<body>
 
<a class="ajaxify" href="#">Home</a>
<a class="ajaxify" rel="dock" href="/portfolio/dock.html">Services</a>
<a class="ajaxify" rel="about" href="about.html" target"#wrapper">About me</a>
 
 
<!-- content holder -->
<div id="wrapper">essai defaut home page</div>
</body>
 
 
</html>

En espérant que quelqu'un puisse m'aider car je cherche depuis de nombreuses heures une solution...

Merci d'avance!

27/02/2013, 18h04
lolo34140

En fait j'ai l'impression que le jquery : jquery.ajaxify.js n'est simplement pas exécuté. Si je l'enlève ça ne change rien. J'arrive toujours à chargé le contenu mais j'ai toujours le problème d'url sans hash...
27/02/2013, 18h09
Golgotha

Normalement tu devrais juste avoir :

Code:

$('.ajaxify').ajaxify();
27/02/2013, 18h17
lolo34140

Merci pour la réponse.

Oui d'après la documentation cela doit suffire. Mais en pratique si je met juste ça rien ne marche. En fait comme si le plugin n'était pas appelé.
Je comprend vraiment pas pourquoi.
Je précise que je fais mes tests en ligne pour le coté ajax.

J'ai essayé avec la version 1 : http://max.jsrhost.com/ajaxify/old/example.html
voici ce que ça donne en ligne sur mon site : http://freakyshape.com/#/portfolio/dock.html

Celle ci marche bien mais n'a pas d'animation et autres fonctions qui m’intéresse.

Je ne comprend vraiment pas pourquoi la version 2 ne marche pas. J'ai beau trifouiller dans le site de la démo et regarder dans les fichiers mais je ne vois pas comment ça marche...
27/02/2013, 22h36
mctarek

ajaxify

Salut. J'ai remarqué que vous avez jquery-1.9.0.min.js mais il est recommandé d'installer jquery-migrate-1.1.x.min.js si un script/plugin utilise encore des fonctions actuellement dépréciées. Il est possible que l'erreur silencieuse vient de là. Tester éventuellement jquery-1.8.3.min.js. mctarek
28/02/2013, 01h33
danielhagnoul

Citation:

Envoyé par mctarek

Salut. J'ai remarqué que vous avez jquery-1.9.0.min.js mais il est recommandé d'installer jquery-migrate-1.1.x.min.js si un script/plugin utilise encore des fonctions actuellement dépréciées. Il est possible que l'erreur silencieuse vient de là. Tester éventuellement jquery-1.8.3.min.js. mctarek

Même le 1.8.3 sera trop récent pour cette chose obsolète qui fonctionne avec : <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>.

Merci pour votre aide!!

Effectivement j'ai bien un conflit de jquery 1.9.x.
J'arrive bien à faire fonctionner ajaxify. Mais je n'arrive pas a faire fonctionner tous mes plugin jquery en même temps à cause de conflit.

L'utilisation de jquery migrate ou de jquery 1.8.3 ne résoud pas mes problème.
Existe t-il une solution pour réussir à tout faire marcher en même temps?

Par contre du coup juste avec le code précédent :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 $(function () { function ajaxify(file) { $('<div id="loading"></div>').html("Loading Content: " + file + " ...").appendTo('body').fadeIn(); $.get(file, function (data) { $("#ajaxify_container").slideUp('slow', function () { $(this).html(data).slideDown('slow', function () { $('#loading').fadeOut('slow', function () { $(this).remove(); }); }); }); }); } $(".ajaxify").click(function () { $('.ajaxify').removeClass('current'); $(this).addClass('current'); ajaxify($(this).attr('href')); return false; }); ajaxify('homepage.html'); });
Je n'ai plus de conflit jquery étant donné que je n'utilise plus le plugin ajaxify.

Il faudrait intégrer dans ce code l'évènement haschange.
Malheureusement je ne sais pas le faire.

J'ai essayé avec ça sans succés : http://benalman.com/code/projects/jq...es/hashchange/

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
/*
 * Gestionnaire d'évènement "onhashchange".
 * 
 * Fait quelque chose ! Ici ajoute ou retire
 * la classe "selected" aux tags "a".
 */
$( window ).hashchange( function(){
	var hash = location.hash;
 
	/*
	 * Remplacer cette action par
	 * celle qui vous convient.
	 */
	$( "a" ).each( function( i, item ){
		var jObj = $( item );
 
		if ( jObj.attr( 'href' ) === hash ){
			jObj.addClass( "selected" );
		} else {
			jObj.removeClass( "selected" );
		}
    });
})
 
/*
 * Obligatoire pour traiter la page en cours.
 */
$( window ).hashchange();

01/03/2013, 23h29
lolo34140

Merci pour l'aide!

Malheureusement avec mon niveau, je suis incapable de parvenir à quoi que ce soit avec ce code.

Je ne sais pas trop quoi en faire...

Bon je pense être sur la bonne piste. J'arrive à ajouter l'évènement hashchange.

J'arrive aussi a charger le contenu avec les boutons back et next du browser internet.

Cependant j'ai quelques bug. J'ai l'impression que j'ai mon script s’exécute plusieurs fois..
Je n'ai certainement pas fais quelque chose de très propre...

Voici mon nouveau code :
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 $(function () { function ajaxify(file) { $('<div id="loading"></div>').html("Loading Content: " + file + " ...").appendTo('body').fadeIn(); $.get(file, function (data) { $("#ajaxify_container").slideUp('slow', function () { $(this).html(data).slideDown('slow', function () { $('#loading').fadeOut('slow', function () { $(this).remove(); }); }); }); }); } $(".ajaxify").click(function () { $('.ajaxify').removeClass('current'); $(this).addClass('current'); ajaxify($(this).attr('href')); window.location.hash = $(this).attr("href"); return false; }); ajaxify('homepage.html'); }); $(function(){ $(window).hashchange( function(){ var hash = window.location.hash; var hash = location.hash.replace("#",""); if(window.location.hash) { $.get(hash, function (data) { $("#ajaxify_container").html(data)( function () { }); }); } else { // Fragment doesn't exist } }) $(window).hashchange(); });
EDIT : voici un exemple en ligne : http://freakyshape.com/
En fait j'ai des problèmes avec les animations. Le nouveau contenu s'affiche avant que l'animation ne soit fini. Il faudrait que le conteneur slideUp avec l'ancien contenu puis slidedown avec le nouveau contenu...
Par contre j'ai aussi remarqué que la mise en page css est chargé qu'a la fin (ce qui se voit). Est-il possible d'afficher le contenu uniquement lorsque que tout est bien chargé (css y compris) ?

comme ça finalement ça semble parfait !

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
$(function () {
    function ajaxify(file) {
        $('<div id="loading"></div>').html("Loading Content: " + file + " ...").appendTo('body').fadeIn();
        $.get(file, function (data) {
            $("#ajaxify_container").slideUp('slow', function () {
                $(this).html(data).slideDown('slow', function () {
                    $('#loading').fadeOut('slow', function () {
                        $(this).remove();
 
                    });
                });
            });
        });
    }
    $(".ajaxify").click(function () {
        $('.ajaxify').removeClass('current');
        $(this).addClass('current');
        ajaxify($(this).attr('href'));
		window.location.hash = $(this).attr("href");
        return false;
 
    });
    ajaxify('homepage.html');
});
 
$(function(){
$(window).hashchange( function(){
var hash = window.location.hash;
var hash = location.hash.replace("#","");
 
if(window.location.hash) {
  $.get(hash, function (data) {
            $("#ajaxify_container").slideUp('slow', function () {
                $(this).html(data).slideDown('slow', function () {
                    $('#loading').fadeOut('slow', function () {
                        $(this).remove();
 
                    });
                });
 
            });
        });
} else {
  // Fragment doesn't exist
}   	
  })
  $(window).hashchange();
});

Après je sais pas si ce code est bien fait. En tout il semble marcher!

Voici aussi mon code html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/jquery.ba-haschange.js" type="text/javascript"></script>
<script src="js/jquery.livequery.pack.js" type="text/javascript"></script>
<script src="js/jquery.ajaxify.js" type="text/javascript"></script>
<script src="js/jquery.history.fixed.js" type="text/javascript"></script>
 
 
<div id="ajaxify" style="height: 100px">
<a class="ajaxify" rel="#essai" href="/portfolio/dock.html" >Link 1 </a>
<a class="ajaxify" rel="link2" href="/portfolio/dock1.html">Link 2 </a>
<a class="ajaxify" rel="link3" href="/portfolio/dock2.html" >Link 3 </a></div>
<div id="ajaxify_container" style="position:relative;height: 100%">
</div>