AJAX - Recargar una parte de una página web sin el uso de un archivo separado para cargar

Question

El título puede ser un poco confuso, así que déjame explicarte.

Tengo un sitio web que tiene un panel lateral, que contiene información sobre el usuario, las cosas que el usuario puede hacer, etc. Cuando el usuario no está conectado, este panel lateral se convierte en el área para iniciar sesión o registrarse.

El código para esto es:

<?php
if($user->loggedIn)
{
?>
<!-- side-panel for logged in users here -->
<?php
}
else
{
?>
<!-- login/registration etc -->
<?php
}
?>

Lo que quiero hacer es volver a cargar este fragmento de código cuando el usuario haga clic en iniciar sesión con AJAX, y use un efecto jQuery (probablemente se desvanezca) que hace que la transición del panel lateral de inicio de sesión / registro a la brillante solo sea transparente. panel.

Sé que podría hacer esto si pongo ese código en otro archivo y lo cargué a través de AJAX en el div para el panel lateral ... pero preferiría no hacer un archivo separado solo para el panel lateral. ¿Es esto posible?

Answer 1

Puede cargar la página con una solicitud AJAX y luego eliminar los datos que no sean el panel lateral, pero ¿cuál sería el punto? Su mejor opción sería simplemente separar el panel lateral en su propio archivo.

Ah, y eso también se consideraría la forma correcta de hacerlo, por lo que puede editar la barra lateral sin editar las páginas en las que aparece.

Answer 2

Si entiendo correctamente lo que necesita, puede intentarlo de esta manera:

$.ajax({
    type: "GET",
    url: "url", // replace 'url' with your url
    cache: false,
    success: function(data){
        alert($(data).find('#sidebar').html());
    }
});

Tal vez funcione con $ .load () o $ .get (), dunno.

Answer 3

¿Por qué se opone a mantener el panel lateral en su propio archivo? Mantiene las cosas más modulares y organizadas.

Si realmente se opone a mantener el contenido en un archivo, puede colocar el contenido en una base de datos y consultarla cada vez que se realice la llamada AJAX.

Answer 4

¿Podría pasar un parámetro de cadena de consulta a la página y luego, basándose en eso, solo realiza un renderizado parcial (solo barra lateral) de la página? Luego solo use su método jquery / ajax normal e incluya el parámetro de cadena de consulta.

$.ajax(function(){
    url: MyPage.php?sidebar_only=true
    ect...
})

Answer 5

Suponiendo que obtendrá los datos reales del usuario a través de otra llamada, podría usar dos divs. El div que contiene el html para el panel de usuario comienza oculto. Cuando obtenga un inicio de sesión exitoso, oculte la división de inicio de sesión y muestre la división del panel de usuario. Usando los datos del inicio de sesión de AJAX, complete la información personalizada del panel. Supongo que la llamada de inicio de sesión AJAX devolverá la información necesaria para completar el nombre de usuario y lo que pueden hacer. Esto solo lo hace para que no tenga que arrastrar el html para todo el panel de usuario.