jQuery liens profonds et chargement ajax dans plusieurs conteneurs (conteneurs) sous

Question

Je développe actuellement un site et ont heurté un problème .. (chargement ajax urls) stockés pensé que quelqu'un pourrait aider ..

première est la page échantillon ici mise en page:

<div id="main-container"> 
    <div id="top-menu"> 
    <a href="/link1" rel="ajax" />Link 1</a> 
    <a href="/link2" rel="ajax" />Link 2</a> 
    </div> 
    <div id="content"> 
    <div id="results"> 
    <!-- category results go here --> 
     <a href="/link1/category/cat-1/page/1" rel="ajax" />page 1</a> 
     <a href="/link1/category/cat-2/page/2" rel="ajax" />page 2</a>   
    </div> 
    <div id="categories"> 
     <a href="/link1/category/cat-1" rel="ajax" />cat 1</a> 
     <a href="/link1/category/cat-2" rel="ajax" />cat 2</a>  
    </div> 
    </div> 
</div> 

Tout va bien si je veux charger le contenu en cliquant sur les liens .. Le plus dur commence quand je veux activer le support de l'histoire (créer urls raccordables profondes) ..

Je ne peux pas comprendre comment charger les parties nécessaires si l'URL complète est donnée par exemple

site.com/link1.html#/category/cat-1/page/ 

Quelques idées je:

1. Chaque lien a un attribut qui indique où charger le contenu
2. L'URL est envoyée à une unité de commande qui renvoie les données sur l'endroit où charger
3. Le hachage a plusieurs parties et peut être divisé en tableau, puis chaque partie est chargée

Sult devrait être un peu comme facebooks navigation où vous pouvez naviguer entre la page d'accueil, messages, liste d'amis sans rafraîchir la page .. Et puis dans chacun des endroits que vous pouvez naviguer par sublinks ..

Answer 1

Découvrez Ben Alman's BBQ: Back Button & Query Library Plugin

Il est vraiment facile d'ajouter le support de bouton de retour

Answer 2

tnx :) eu un coup d'oeil sur ce .. c'est un plugin vraiment sympa, cependant, après avoir réfléchi un peu j'ai compris la partie qui me manquait .. (probablement aurait dû inclure le code js)

var hash = window.location.hash.substr(1); 
var href = $('a[rel=ajax]').each(function(){ 
    var href = $(this).attr('href'); 
      var where = $(this).attr('test'); 
      //alert(where); 
    if(hash==href.substr(0,href.length-5)){ 
     var toLoad = hash+'.html'; 
     $('#content_full').load(toLoad) 
    }           
}); 

ce sont les lignes qui sont appelées si hash est trouvé (après chargement de la page) .. (je voulais rendre le script un peu trop avancé .. et au lieu d'utiliser un conteneur par défaut où les données sont chargées je voulais prendre l'emplacement url .. (ne demandez pas pourquoi ..))

alors maintenant tout devrait bien fonctionner :) (Je vais ajouter une variable à chaque lien ajax sur la section dans laquelle il devrait charger, ces données seront ensuite envoyées à php script qui va sortir les données nécessaires (seulement la section voulue), si cette var ne sera pas définie, le script affichera le contenu complet)