Asual JQuery Address

Changer le contenu de la page + URL sans rechargement

Sujet résolu

16 février 2011 à 2:53:20

Bonsoir/Bonjour,

Voilà, j'ai un petit soucis, je prévois d'utiliser jquery address de Asual pour changer le contenu de ma page sans la recharger tout en changeant l'URL.
Pour ceux qui ne connaissent pas voici le lien : http://www.asual.com/jquery/address/docs/

Le problème est le suivant : je n'y comprend rien ...

Ce que je dois faire :
J'ai un div en haut de ma page qui ne changera jamais, dans lequel se trouvent des animations, si je recharge la page, les anims reprennent du début ...
Je souhaite donc en cliquant sur un lien, changer le contenu de mon div #content sans recharger la page pour que mon div d'anim #top continu de tourner (un peu comme pour le lecteur musique de deezer), tout ça en changeant l'URL de ma page ...
Jusqu'a maintenant, j'ai fais avec des innerHTML pour changer le contenu du div, mais il manque le changement d'URL.

Voilà donc si quelqu'un est déjà passé par là et peux me donner un ptit coup de main, je lui en serais très reconnaissant !

Merci d'avance les zéros,

yarflam

16 février 2011 à 6:10:23

Salut.
C'est quel type d'animation ? swf, js, ogg ...
Sinon pour l'URL, le PHP ou les cookies s'y présente très bien.
@++

ps: Pourquoi tu veux changer cette URL ? Elle t'a rien fait que je sache

Twuce

16 février 2011 à 11:04:57

Salut, merci pour ta réponse.

C'est une animation js avec peut être même un lecteur mp3 plus tard, donc il faut que la musique continu de se lire avec l'animation.

Et il faut pouvoir mettre en bookmark, partager sur facebook, twitter, myspace, faire retour arrière dans le navigateur. C'est pour ça que je veux utiliser le script js pour changer l'URL (même si elle ne m'a rien fait

)

Si c'est possible avec les COOKIES, je ne sais pas comment ?

EDIT:

Bon j'arrive a changer l'uri sans souci c'était pas très compliqué, il suffisait d'un :
<a href="#test/prout" onClick="send('test/', 'up');">TEST <? echo rand(100, 999);?></a>
la fonction send() qui fait un innerHtml

Maintenant, il me manque le ptit script en javascript pour exécuter le send quand l'url est changé (si un utilisateur tape l'url www.monsite.com/#test/prout) il faut récupérer test (qui est la page a afficher dans le div) et prout (le paramètre) ... je sais pas si je me fais bien comprendre ?

RE-EDIT :

En php ce n'est pas possible, il ne récupère pas la bonne url ... l'url est bien changé en www.monsite.com/#profil/membre et le php affiche www.monsite.com !

Voilà un bout de code :
index.php

<body>  
<a href="#profil/membre" onClick="send('profil/index.php', 'up');">TEST <? echo rand(100, 999);?></a>
<? 
$monUrl = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
?>
<div id="up"><? echo $monUrl.'<br />'; ?>ahah</div>
</body>

Le problème est que le plugin utilisé fourni une fonction qui permet d'exécuter du code au changement de l'adresse (par un clique, ou si on tape directement dans la barre d'url, etc ...). Je n'arrive pas a exécuter de code.

Si quelqu'un qui s'y connais la dedans passe par la, je gagnerais quelques journées de prise de tête

A+

Twuce

17 février 2011 à 12:37:20

Salut,

Apparemment il n'y a pas beaucoup de monde qui utilise ce plugin.
J'ai trouvé la réponse.

Code javascript

var log = function(msg) {
                if (!$('.log').size()) {
                    $('<div class="log" />').appendTo('.page');
                }
                $('.log').append(msg.replace(/^([^:]*):(.*)$/, '<p><b>$1:</b> <span class="$1">$2</span></p>'))
                    .attr({scrollTop: $('.log').attr('scrollHeight')})
                    .find('p:nth-child(even)').addClass('even');
            };
            
            // Event handlers
            $.address.init(function(event) {
                log('init: "' + event.value + '"');
                $('a').address(function() {
                    return $(this).attr('href').replace(location.pathname, '');
                });
            }).change(function(event) {
            
                send(event.pathNames[0].substr(0, 1) + 
                    event.pathNames[0].substr(1),'up');
              
                log('change: "' + event.value + '"');
                var text = (event.value == '') ? 'Home' : 
                    event.pathNames[0].substr(0, 1).toUpperCase() + 
                    event.pathNames[0].substr(1);
                $('a').each(function() {
                    $(this).toggleClass('selected', $(this).text() == text);
                });
            }).internalChange(function(event) {
                log('internalChange: "' + event.value + '"');
            }).bind('externalChange', {msg: 'The value of the event is "{value}".'}, function(event) {
                log('externalChange: ' + event.data.msg.replace(/\{value\}/, event.value));
            });

Code HTML :

<a href="/profil/membre">TEST</a><br>
<div id="up">ahah</div>

La page chargée dans le div sera profil/index.php, membre est le paramètre, il reste plus qu'a isolé "membre" en js et lancer une requête.

pathNames[0] = profil;
pathNames[1] = membre;

Voilà, j'espère que ca aidera quelqu'un.

A+