AJAX - Ricarica una parte di una pagina Web senza utilizzare un file separato da caricare

Question

Il titolo potrebbe essere un po 'confuso, quindi lasciami spiegare.

Ho un sito Web che ha un pannello laterale, che contiene informazioni sull'utente, cose che l'utente può fare, ecc. Quando l'utente non ha effettuato l'accesso, questo pannello laterale diventa l'area per l'accesso o la registrazione.

Il codice per questo è:

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

Quello che voglio fare è caricare di nuovo questo frammento di codice quando l'utente fa clic su Accedi con AJAX e usa un effetto jQuery (probabilmente sfumato) che rende agevolmente la transizione del pannello laterale da login / registrazione ai soli utenti brillanti pannello.

So che potrei farlo se inserissi quel codice in un altro file e lo caricassi tramite AJAX nel div per il pannello laterale ... ma preferirei non creare un file separato solo per il pannello laterale. È possibile?

Answer 1

Potresti caricare la pagina con una richiesta AJAX e quindi eliminare i dati diversi dal pannello laterale, ma quale sarebbe il punto? La tua migliore opzione sarebbe quella di separare semplicemente il pannello laterale nel suo file.

Oh, e sarebbe anche considerato il modo corretto di farlo, quindi puoi modificare la barra laterale senza modificare le pagine in cui si trova.

Answer 2

Se capisco correttamente ciò di cui hai bisogno, puoi provare in questo modo:

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

Forse funzionerà con $ .load () o $ .get (), non so.

Answer 3

Perché sei contrario a mantenere il pannello laterale nel suo file? Mantiene le cose più modulari e organizzate.

Se sei davvero contrario a conservare il contenuto in un file, potresti metterlo in un database e interrogarlo ogni volta che viene effettuata la chiamata AJAX.

Answer 4

Potresti passare un parametro di stringa di query alla pagina e quindi basarti su un rendering parziale (solo barra laterale) della pagina? Quindi usa il tuo normale metodo jquery / ajax e includi il parametro della stringa di query.

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

Answer 5

Supponendo che otterrai i dati utente effettivi attraverso un'altra chiamata, puoi utilizzare due div. Il div contenente l'html per il pannello utente inizia nascosto. Quando si ottiene un accesso riuscito, nascondere il div di accesso e mostrare il div del pannello utente. Utilizzando i dati dal login AJAX, inserire le informazioni personalizzate del pannello. Presumo che la chiamata di accesso AJAX restituirà le informazioni necessarie per inserire il nome utente e cosa possono fare. Questo lo rende quindi non è necessario inserire l'html per l'intero pannello utente.