[Javascript] Aggiornare solo un DIV una sola volta con un click di un bottone

Discussione in 'Javascript' iniziata da samurai.sette, 20 Marzo 2017 alle 18:23.

  1. samurai.sette

    samurai.sette Utente Attivo

    Registrato:
    17 Dicembre 2015
    Messaggi:
    110
    Mi Piace Ricevuti:
    3
    Punteggio:
    18
    Ciao a tutti. Apro questa discussione per chiedervi un aiuto.
    Nella mia pagina .php ho diversi DIV e all'interno di ognuno ci sono vari input text e bottoni. Quello che vorrei fare è questo: quando clicco su un bottone che si trova all'interno di un DIV (ad esempio div1) vorrei che venisse aggiornato soltanto il DIV contenente il bottone cliccato (in questo caso div1) e non tutta la pagina.
    Ho visto le altre discussioni in merito ma in ognuna si parla di aggiornare il DIV ogni tot secondi mentre nel mio caso mi deve aggiornare il DIV una sola volta dopo aver cliccato il bottone.
    Mi sapreste dire come mi dovrei muovere?
    Grazie mille, ciao.
     
  2. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.409
    Mi Piace Ricevuti:
    49
    Punteggio:
    48
    Località:
    TN
    Ciao, con cosa devi aggiornarlo ? devi prendere dati da un database ?
     
  3. samurai.sette

    samurai.sette Utente Attivo

    Registrato:
    17 Dicembre 2015
    Messaggi:
    110
    Mi Piace Ricevuti:
    3
    Punteggio:
    18
    Ciao criric. Scusa se non ho risposto subito.
    Ti spiego.
    Inizialmente tutti i div sono impostati con style="visibility:hidden", per cui all'apertura della pagina non ne vedo neanche uno. Esternamente a tutti i DIV ci sono alcuni bottoni e ciascuno di essi mi rende visibile il DIV corrispondente (esempio: il bottone1 mi rende visibile il DIV1,il bottone2 mi rende visibile il DIV2, etc.). Dentro ogni DIV ci sono vari input text e altri bottoni. L'utente inserisce i dati richiesti e premendo un bottone vengono eseguite delle istruzioni tramite PHP.
    Ma qui mi sorge il problema: dopo aver inserito i dati e premuto il bottone all'interno del DIV mi viene rigenerata tutta la pagina, quindi i DIV tornano a non essere più visibili. Se voglio vedere i risultati generati dalle istruzioni PHP devo ricliccare di nuovo il bottone esterno ai DIV in modo da renderlo di nuovo visibile.
    Quello che avevo pensato è questo: far rigenerare soltanto il DIV che ho reso visibile in precedenza e non tutta la pagina in modo tale che non torna ad essere nascosto.
    Secondo te come dovrei fare?
    Ciao, grazie mille.
     
  4. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.409
    Mi Piace Ricevuti:
    49
    Punteggio:
    48
    Località:
    TN
    Ajax,
    separi il codice php dall'html e aggiorni il div senza ricaricare la pagina. Facile :)
    se vuoi ti posto un esempio
     
  5. samurai.sette

    samurai.sette Utente Attivo

    Registrato:
    17 Dicembre 2015
    Messaggi:
    110
    Mi Piace Ricevuti:
    3
    Punteggio:
    18
    Ciao Criric. Grazie mille per la risposta.
    Mi potresti postare un esempio? Te ne sarei infinitamente grato.
    Ciao, grazie mille.
     
  6. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.409
    Mi Piace Ricevuti:
    49
    Punteggio:
    48
    Località:
    TN
    Pagina html, contiene la chiamata per la pagina php
    HTML:
    <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
            <script>
                function funzione(div_id) {
                    var data = $("#" + div_id + " form").serialize();
                    $("#" + div_id).html("attendi prego....");
                    $.post("elabora.php", data, function (response) {
    
                        $("#" + div_id).html(response);
                    })
                }
            </script>
            <style>
                .box {
                    display:none;
                }
            </style>
        </head>
        <body>
            <div>
                <div id="div1" class="box">
                    <form>
                        Nome : <input type="text" name="nome"/>
                        <input type="button" name="invia" value="invia" onclick="funzione('div1')"/>
                    </form>
                </div>
                <input onclick="$('#div1').show()" type="button" value="mostra"/>
            </div>
        </body>
    </html>
    elabora.php, riceve il parametro nome e lo stampa a video
    PHP:
    <?php

    $isAjax 
    = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';
    if (!
    $isAjax) {
        die(
    "accesso negato");
    }

    sleep(1);

    echo 
    "<b style='color:blue'>Ciao " $_REQUEST['nome'] . "</b>";
    non ho commentato ma sono poche righe, se hai bisogno chiedi pure.
     
  7. samurai.sette

    samurai.sette Utente Attivo

    Registrato:
    17 Dicembre 2015
    Messaggi:
    110
    Mi Piace Ricevuti:
    3
    Punteggio:
    18
    Ciao Criric. Grazie mille, il codice che mi hai scritto fa esattamente quello che volevo.
    Grazie, grazie, grazie.
    Ciao.
     
    A criric piace questo elemento.
Sto caricando...

Condividi questa Pagina