jQuery + Ajax Hash/Historial y más

Question

Estoy tratando de controlar los valores hash de URL en jQuery para controlar el historial en Ajax y hacer que los enlaces/páginas sean marcables. He probado casi todos los plug-in que hay, y parece que no puedo hacer que funcionen correctamente, así que no tengo ningún ejemplo de código realmente. Pero estoy abierto a cualquier sugerencia, información, tutoriales, etc.

La diferencia en una de las páginas que intento incorporar es que tengo una página de splash/carga de animación jQuery, que también es la misma página en la que se cargará todo el contenido.

..y en este enlace, quiero omitir toda la animación de salpicado/carga y cargar directamente el contenido según los valores de hash/cadena (en este caso, #home).

He estado tratando de resolver esto por un tiempo, cualquier ayuda es muy apreciada, ¡gracias!

Answer 1

¿De qué estás teniendo problemas? ¿Configurando la etiqueta hash o manejando el cambio del hash?

Por supuesto, configurar los hashes es simplemente una cuestión de poner los hash en los enlaces, por ejemplo <a href="www.voidsync.com/2010/#page">Link</a>, pero supongo que ese no es su problema.

Para hacer realmente algo con el hash, debe tener una función de escucha que verifique, por ejemplo, que cada 100 ms cambie el hash y actúe en consecuencia. Una función simple podría ir así:

$(function() { 
    var current_hash = false; 
    setInterval(function() { 
     if(window.location.hash != current_hash) { 
      current_hash = window.location.hash; 
      $('#content').load("content.php?page="+current_hash); 
     }   
    }, 100);  
}); 

Esa función (no probado) comprobaría cada 100 ms si el hash ha cambiado, y si es así, a continuación, actualiza la página a través de Ajax.

Esta función también funciona en la carga de la página, por lo que si el usuario aterriza en la página con un enlace como www.voidsync.com/2010/#images, la función cargará las 'imágenes' de la página automáticamente. Así que la historia y los marcadores funcionan.

Espero que te ayude, solo pregunta si quieres decir algo más.

Answer 2

Basado en la respuesta de Tatu, acabo de cambiar algunas cosas para que esto funcione para mí. Mantiene un historial, por lo que los botones de avance y retroceso funcionan bien. Esto es lo que tengo,

$(function() { 
var current_hash = false; 
setInterval(function() { 
    if(window.location.hash != current_hash) { 
     current_hash = window.location.hash; 
      if(current_hash=='#home'){ 
       var month = '9'; 
       var year ='2011';  
       $.ajax({ 
        type: "POST", 
        url: "/home.php", 
        data: "data+here", 
        success: function(msg){ 
         $('#div').html(msg); 
        }  
       });      
      } 
      else if(current_hash=='#edit'){ 
       $.ajax({ 
        type: "POST", 
        url: "/edit.php", 
        data: "data+here", 
        success: function(msg){ 
         $('#div').html(msg); 
        }  
       });    
      } 
    }   
}, 100); 

Después, simplemente asignar algunos de hash de los enlaces de atributos href;

    <li><a href="#home">Home Page</a></li> 
       <li><a href="#edit">Edit Page</a></li> 

no es toda una reescritura, básicamente añade algo de si las declaraciones a la misma cosa, pero puede ayudar a alguien.