Visualizzazione risultati 1 fino 8 di 8

Discussione: Caricare div senza reload della pagina

  1. #1
    Guest

    Predefinito Caricare div senza reload della pagina

    Ciao a tutti, è possibile aprire un div caricando solamento quel div specifico e non ricaricando tutta la pagina?

    Ad esempio mi piacerebbe che cliccando su una voce del menu sulla sinistra si aprisse il contenuto di un div sulla destra, non so se mi sono spiegato.

    Grazie

  2. #2
    Guest

    Predefinito

    E' certamente possibile, ma devi usare javascript e css.
    I passi per farlo sono riassumibili in:

    1) dichiari ed eventualmente popoli il div nella pagina, ma nascosto
    2) quando l'utente fa clic da qualche parte (che decidi tu) richiami uno script javascript che cambia lo stato del div da nascosto a visibile (di solito cambiandogli la classe css)

    Ovviamente devi avere un po di dimestichezza con HTML, Javascript e CSS...

    Dai un'occhiata al mio sito ****, c'è un menu che funziona con il principio che ti ho descritto. Se è l'effetto che cerchi domani ti passo il codice, che però dovrai personalizzare.

    Ciao!
    Ultima modifica di alemoppo : 19-09-2012 alle ore 23.48.43 Motivo: rimosso link spammino :)

  3. #3
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,752

    Predefinito

    Devi assegnare un id al div. Quindi, tramite javascript puoi assegnargli un contenuto differente, dopo il caricamento della pagina:

    Codice HTML:
    <div id="contenuto">Contenuto iniziale</div>
    <a href="#" onClick="document.getElementById('contenuto').innerHTML='nuovo contenuto!'; return false;">cambia</a>
    Se invece vuoi prendere il contenuto da un'altra pagina, devi usare ajax.
    In alternativa, puoi includere jQuery, e usare ad esempio .load() (che comunque usa ajax, però in questo modo è facilitato). Quindi fare una cosa del tipo:

    Codice HTML:
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    function carica(numero)
    {
         $('#contenuto').load('pagina'+numero+'.html');
         return false;
    }
    </script>
    <div id="contenuto">contenuto iniziale</div>
    <a href="#" onClick="carica('1')">pagina1</a>
    <a href="#" onClick="carica('2')">pagina2</a>
    p.s: comunque, prima di aprire un topic, come da regolamento, è opportuno fare una ricerca!. Ad esempio, vedi qui. (lì c'é l'esempio con ajax).

    Ciao!
    Ultima modifica di alemoppo : 19-09-2012 alle ore 23.57.38

  4. #4
    Guest

    Predefinito

    Quindi se non ho capito male
    nel caso volessi utilizzare i div con javascript, dovrei creare un'unica pagina che conterrebbe tutto il codice del sito giusto?

  5. #5
    Guest

    Predefinito

    Citazione Originalmente inviato da alemoppo Visualizza messaggio
    Devi assegnare un id al div. Quindi, tramite javascript puoi assegnargli un contenuto differente, dopo il caricamento della pagina:

    Codice HTML:
    <div id="contenuto">Contenuto iniziale</div>
    <a href="#" onClick="document.getElementById('contenuto').innerHTML='nuovo contenuto!'; return false;">cambia</a>
    Ciao, in questo esempio al posto di 'nuovo contenuto' dovrei mettere l'id del nuovo div giusto? Come faccio però a nasconderlo? Perchè se ne creo uno nuovo e lo mette nel codice, questo viene visualizzato. Grazie

  6. #6
    Guest

    Predefinito

    Vedo che nella mia risposta in cui ho messo il link al mio sito il link è stato rimosso da alemoppo. Non sapevo che non si potesse mettere. Chiedo scusa, ne terrò conto in futuro.

  7. #7
    Guest

    Predefinito

    Citazione Originalmente inviato da alemoppo Visualizza messaggio

    Se invece vuoi prendere il contenuto da un'altra pagina, devi usare ajax.
    In alternativa, puoi includere jQuery, e usare ad esempio .load() (che comunque usa ajax, però in questo modo è facilitato). Quindi fare una cosa del tipo:

    Codice HTML:
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    function carica(numero)
    {
         $('#contenuto').load('pagina'+numero+'.html');
         return false;
    }
    </script>
    <div id="contenuto">contenuto iniziale</div>
    <a href="#" onClick="carica('1')">pagina1</a>
    <a href="#" onClick="carica('2')">pagina2</a>
    Ciao!
    Così però viene ricaricata tutta la pagina, io invece vorrei che venisse caricato solamente un pezzo della pagina.

  8. #8
    Guest

    Predefinito

    Non ti andava bene la soluzione travata QUI?

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •