cómo obtener la función ajax .load para no volver a cargar la página completa

Estoy usando la función ajax .load para cargar contenido e imágenes en mi sitio. Una vez que se hace clic en un enlace, quiero que el contenido de destino (cualquier página con #subcontenido) se cargue dinámicamente en el div de #contenido. Hasta ahora el código funciona al cargar el contenido. Sin embargo, tras la primera carga de cualquier página, parece que toda la página aún se está recargando en el navegador. Más específicamente, el área de la barra lateral izquierda con la navegación y el encabezado parpadean cuando se hace clic en un enlace. No es hasta que una página se carga por primera vez y se almacena en caché en el navegador, luego se vuelve a hacer clic en que la función de carga funciona de la manera que yo quiero. Es decir, cargar el contenido sin volver a cargar toda la página, es decir, la barra lateral y la navegación.

La pregunta entonces es ¿Cómo puedo hacer que este código funcione para vincular a una página deseada y hacer que se cargue en el div #content sin volver a cargar la página completa en el clic inicial? (Anteriormente estaba usando un iframe para cargar contenido, pero este método obviamente está más actualizado y espero poder hacerlo funcionar). ¡¡Gracias!!

La URL del sitio web: www.adamclarkart.com

El código:

 // Part 1
$(document).ready(function(){
    $("#content").load("beach-1.html");
});

$(function(){

        $('#illustrationsSection a').click(function(){
            location.hash=$(this).attr('href').match(/(^.*)\./)[1]
            return false
        })

        $('#sketchesSection a').click(function(){
            location.hash=$(this).attr('href').match(/(^.*)\./)[1]
            return false
        })

        $('#motionTab a').click(function(){
            location.hash=$(this).attr('href').match(/(^.*)\./)[1]
            return false
        })

        $('#infoTab a').click(function(){
            location.hash=$(this).attr('href').match(/(^.*)\./)[1]
            return false
        })

        $('#info a').click(function(){
            location.hash=$(this).attr('href').match(/(^.*)\./)[1]
            return false
        })
// Part 2 
        var originalTitle=document.title
        function hashChange(){
            var page=location.hash.slice(1)
            if (page!=""){
                $('#content').load(page+".html #sub-content")
                document.title=originalTitle+' – '+page
            }
        }

// Part 3, ajax spinner .gif
    $('html')
    .ajaxStart(function(){
        $(this).addClass('ajax-spinner')
    })
    .ajaxStop(function(){
        $(this).removeClass('ajax-spinner')
    })

// Part 4
        if ("onhashchange" in window){ // cool browser
            $(window).on('hashchange',hashChange).trigger('hashchange')
        }else{ // lame browser
            var lastHash=''
            setInterval(function(){
                if (lastHash!=location.hash)
                    hashChange()
                lastHash=location.hash
            },100)
        }
    })

preguntado el 03 de mayo de 12 a las 19:05

1 Respuestas

Aplicaré una clase a esos enlaces para poder seleccionar fácilmente en un selector jQuery

<a href="media.php" class="ajaxLink">Media</a>
<a href="photos.php" class="ajaxLink">Photos</a>
<a href="contact.php" class="ajaxLink">Contact</a>

Guión

$(function(){

  $(".ajaxLink").click(function(e){
   e.preventDefault();
   $("#content").load($(this).attr("url"));   
  });

});

Respondido el 14 de junio de 12 a las 20:06

Mmm. Traté de ingresar esto en mi código anterior y le di a los enlaces la clase .ajaxLink. Todavía tengo el mismo problema. El contenido se cargará, pero seguirá cargando toda la página con el primer clic inicial. ¿Algún otro pensamiento? - AdamC

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.