Foros del Web » Programando para Internet » Javascript » Frameworks JS »

navegación con ajax

Estas en el tema de navegación con ajax en el foro de Frameworks JS en Foros del Web. Saludos Bueno, tengo un script que hace que cambie el contenido de la pagina sin cargar la pagina completa, ademas esta cambia el link para ...
  #1 (permalink)  
Antiguo 26/03/2014, 16:38
 
Fecha de Ingreso: enero-2013
Mensajes: 40
Antigüedad: 11 años, 2 meses
Puntos: 1
navegación con ajax

Saludos

Bueno, tengo un script que hace que cambie el contenido de la pagina sin cargar la pagina completa, ademas esta cambia el link para que funcionen los botones de atras y adelante.

pero me gustaría saber si hay algún script que haga esto mismo, pero obviamente mejor. ya que el código que tengo yo tiene algunos problemas.

este es el código por si lo quieren revisar.
Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.     (function($){
  3.         var contenido = $('div#contenido'), url_anterior = '', extension = '.html', original = window.location;
  4.         $('ul#nav a').each(function(){ //Cambiamos los href por el contenido del atributo data-hash
  5.             $(this).attr('href', $(this).data('hash'));
  6.         });
  7.         $('ul#nav a').on('click', function(e){ 
  8.             var hash = $(this).attr('href');
  9.             e.preventDefault();  
  10.             revisarURL(hash).done(function(){
  11.                 window.location.href = hash; // Buen hash, cambiemoslo en la URL           
  12.             }).fail(function(){
  13.                 window.location.href = '#error';
  14.             }).always(function(datos){
  15.                 contenido.html(datos);
  16.             });
  17.            
  18.         });
  19.        
  20.         revisarURL(); // Si hay un hash en la URL (ej, copiamos y pegamos en una conversación) cargará la URL correcta.
  21.         setInterval(function(){
  22.             revisarURL().fail(function(){
  23.                 window.location.href = '#error';
  24.             }).always(function(datos){
  25.                 contenido.html(datos);
  26.             });
  27.         },250); // Revisamos cualquier cambio en el Hash cada 250 milisegundos
  28.        
  29.         function revisarURL (hash){
  30.             var deferred = $.Deferred();
  31.             if (!hash) { // Esto ocurre cuando se pulsa el botón de atrás o adelante en el navegador o al pasar una URL con hash
  32.                 hash = window.location.hash;
  33.             }
  34.             if (!hash) { // Esto puede pasar si es la primera URL - index.html en nuestro caso
  35.                 var url = window.location.pathname; // Obtenemos la URL completa
  36.                 var archivo = url.substring(url.lastIndexOf('/')+1); // Nos quedamos con el nombre del archivo (index.html)
  37.                 hash = archivo.replace(extension,''); // Le quitamos la extensión para convertirlo en "hash"
  38.             }
  39.             if (hash !== url_anterior){
  40.                 url_anterior = hash;
  41.                 cargarPagina(hash).done(
  42.                     function(data){
  43.                         var html = $(data);
  44.                         var filtrado = html.find('#contenido');
  45.                         deferred.resolve(filtrado.html());
  46.                     }
  47.                 ).fail(function(){ // La URL no existe                 
  48.                     deferred.reject('<p>La página no existe.</p>'); // Rechazamos nuestro deferred     
  49.                 });
  50.             }
  51.             return deferred.promise(); // Devolvemos una promesa, no un deferred
  52.         }
  53.         function cargarPagina(hash){
  54.             url = hash.replace('#','');  //Quitamos la almohadilla
  55.             return $.ajax({
  56.                 url: url + extension,
  57.                 async: true,
  58.                 dataType: "html"});        
  59.         }
  60.     })(jQuery);
  61.   </script>

el problema de este código es que si por ejemplo cambio al link 2 del menú, luego copio el link y lo pego en otra pestaña (o actualizo ahí mismo) me mostrara el contenido del link 1 (el de inicio)

otro problema que tiene que por ejemplo al hacer click en algún link, no aparece algo que diga que este cargando. simplemente lo cambia. y es un poco problemático cuando se demora en cargar el contenido ya que uno no sabe si esta cargando o no, hasta que cambia.

si no entienden de como funciona, aquí tengo una pag. que hace lo que quiero.
http://livedemo00.template-help.com/wt_35059/index.html#!/page_Services
revisé el codigo pero es complejo.


bueno si conocen algun script que haga esto mismo pero de forma mas estable por favor compartan, o si pueden modificar el código anterior.

PD: si quieren el código completo, lo puedo compartir por correo.

Etiquetas: ajax, javascript, navegacion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:30.