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

Discussione in 'Javascript' iniziata da samurai.sette, 20 Marzo 2017.

  1. samurai.sette

    samurai.sette Utente Attivo

    Registrato:
    17 Dicembre 2015
    Messaggi:
    132
    Mi Piace Ricevuti:
    4
    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.591
    Mi Piace Ricevuti:
    54
    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:
    132
    Mi Piace Ricevuti:
    4
    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.591
    Mi Piace Ricevuti:
    54
    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:
    132
    Mi Piace Ricevuti:
    4
    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.591
    Mi Piace Ricevuti:
    54
    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:
    132
    Mi Piace Ricevuti:
    4
    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.
  8. samurai.sette

    samurai.sette Utente Attivo

    Registrato:
    17 Dicembre 2015
    Messaggi:
    132
    Mi Piace Ricevuti:
    4
    Punteggio:
    18
    Ciao Criric, scusa se ritorno sull'argomento e se ti richiedo un aiuto.
    In un'occasione ho fatto come mi hai scritto e ha funzionato alla perfezione.
    Sto cercando di provarlo in un'altra situazione ma mi genera un errore che non capisco.
    L'errore è questo: "ReferenceError: google is not defined"
    Il codice che ho scritto è questo.
    HTML:
    HTML:
    <?php
    ob_start();
    session_start();
    ?>
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
        <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("Attendere prego...");
                $.post("elabora_dati_tab.php", data, function (response)
                {
                    $("#" + div_id).html(response);
                })
            }
            </script>
        <link href="stili_css/monitoraggio.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
       
        <!-- INIZIO BLOCCO DIV CONTENENTE "LOGO INTESTAZIONE" + "MENU A TENDINA" -->
        <div id="intestazione">
    
            <!-- INIZIO DIV LOGO -->
            <div id="logo">
                <img src="Immagini/Logo-SmartStructure.png" width="300" height="33" alt="" title="SmartStructure"/>
            </div>
            <!-- FINE DIV LOGO -->
    
            <!-- INIZIO DIV MENU' A TENDINA -->
            <div id="menu">
                <ul id="dropdown_menu">
                   <li class="barra_menu"><a><img src="Immagini/ico_dati.png" width="24" height="24" alt=""/> Dati</a>
                        <ul>
                            <li><a onclick="$('#dati_tab').show()">Visualizza i dati tabellari</a></li>
                            <li><a>Visualizza i dati filtrati</a></li>
                            <li><a>Estrai tutti i dati in excel</a></li>
                        </ul>
                    </li>
                    
                   <li class="barra_menu"><a><img src="Immagini/ico_documenti.png" width="24" height="24" alt=""/> Documenti</a>
                        <ul>
                            <li><a>Visualizza i documenti</a></li>
                        </ul>
                    </li>
                    
                   <li class="barra_menu"><a><img src="Immagini/ico_aiuto1.png" width="20" height="20" alt=""/> Aiuto</a>
                        <ul>
                            <li><a>Unità di misure</a></li>
                            <li><a>Guida all'utilizzo</a></li>
                        </ul>
                    </li>
                    
                   <li class="barra_menu"><a><img src="Immagini/ico_freccia.png" width="20" height="20" alt=""/></a>
                        <ul>
                            <li><a>Esci</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- FINE DIV MENU' A TENDINA -->
        </div>
        <!-- FINE BLOCCO DIV CONTENENTE "LOGO INTESTAZIONE" + "MENU A TENDINA" -->
       
        <!-- INIZIO BLOCCO DIV CONTENENTE "DATI TABELLARI, DATI FILTRATI, DOCUMENTI, UNITA' DI MISURE, GUIDA -->
        <div id="corpo">
            <!-- INIZIO DIV DATI TABELLARI -->
            <div id="dati_tab">
                <form>
        <!-- inserisco dentro due input text il valore di "username" e "password" -->
                <?php
                    $username = $_SESSION['username'];
                    $password = $_SESSION['password'];
                ?>
                    <input type="text" name="user" value="<?php echo $username; ?>" />
                    <input type="text" name="pass" value="<?php echo $password; ?>" />
    
                   <p style="font-weight:bold; padding-top:5px; text-align:center;"><font color="#00A5DD">D</font><font color ="#2EB800">ATI</font>
                    <font color="#00A5DD">T</font><font color ="#2EB800">ABELLARI</font></p>
                <br />
                   <p><img src="Immagini/ico_tabella.png" width="24" height="24" alt=""/>Seleziona la pagina della tabella da visualizzare (ogni pagina visualizzerà 30 letture)
                    <select name="pagina">
                    <?php
                        // connessione al server e selezione del database "utenti"
                       $con = mysql_connect("localhost","root","") or die("Errore!!! Connessione con il server fallita ").mysql_error();
                       $db = mysql_select_db("meco_monitoraggi",$con) or die("Errore!!! Connessione con il database fallita ").mysql_error();
                        
                        // estrazione del nome della tabella contenente i dati del monitoraggio
                       $committente = mysql_query("SELECT nome_committente FROM utenti WHERE username='$username' AND password='$password' ORDER BY id");
                        $nome_tab = mysql_result($committente,0);
    
                        // estraggo il numero totale delle righe dalla tabella del monitoraggio e calcolo il numero delle pagine
                        $elenco_id1 = mysql_query("SELECT id FROM $nome_tab");
                        $num_righe = mysql_num_rows($elenco_id1);
                        $pagine = ceil($num_righe/30);
       
                        for ($i=1; $i<=$pagine; $i++)
                        {
                            echo "<option>".$i."</option>";
                        }
                        ?>
                    </select>
                <br />
                <br />
                   <input type="button" name="mostra_pagina" value="Visualizza la pagina" style="font-weight:bold" onclick="funzione('corpo')" />
                    </p>
                </form>
            </div>
            
            <!-- FINE DIV DATI TABELLARI -->
        </div>
    </body>
    </html>
    PHP:
    PHP:
    <?php
        $isAjax 
    = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';
        if (!
    $isAjax)
        {
            die(
    "accesso negato");
        }

        
    sleep(1);

        
    // leggo i valori di username e password inseriti dall'utente
        
    $username $_REQUEST['user'];
        
    $password $_REQUEST['pass'];

        
    // connessione al server e selezione del database "utenti"
        
    $con mysql_connect("localhost","root","") or die("Errore!!! Connessione con il server fallita ").mysql_error();
        
    $db mysql_select_db("meco_monitoraggi",$con) or die("Errore!!! Connessione con il database fallita ").mysql_error();

        
    // estrazione del nome della tabella contenente i dati del monitoraggio
        
    $committente mysql_query("SELECT nome_committente FROM utenti WHERE username='$username' AND password='$password' ORDER BY id");
        
    $nome_tab mysql_result($committente,0);

        
    // estraggo il numero totale delle righe dalla tabella del monitoraggio e calcolo il numero delle pagine
        
    $elenco_id1 mysql_query("SELECT id FROM $nome_tab");
        
    $num_righe mysql_num_rows($elenco_id1);
        
    $pagine ceil($num_righe/30);

        
    // estraggo dalla tabella del monitoraggio l'id più piccolo e l'id più grande
        
    $pagina_letta $_REQUEST['pagina'];
        
    $pagine_descres $pagine $pagina_letta;
        
    $elenco_id2 mysql_query("SELECT id FROM $nome_tab");
        
    $id0 mysql_result($elenco_id2,0);
        
    $id1 $id0 30*($pagine_descres 1);
        
    $id2 $id1 29;

          
    // seleziono solo le colonne che mi interessano e che inserirò nella tabella completa
          
    $res mysql_list_fields("meco_monitoraggi","$nome_tab");
          
    $nbCampi mysql_num_fields($res);

          
    $campoDaProibire1 "id";
          
    //$campoDaProibire2 = "umidita";
          //$campoDaProibire3 = "tempint";

          
    $arrayNomi = array();
          for (
    $i=0;$i<$nbCampi;$i++)
          {
            
    $name mysql_field_name($res,$i);
            
    //if (($name != $campoDaProibire1) and ($name != $campoDaProibire2) and ($name != $campoDaProibire3))
            
    if (($name != $campoDaProibire1))   
            {
              
    $arrayNomi[] = "$name";
            }
          }
          
          
    $clausolaSelect "select "implode(',',$arrayNomi);
          
    // fine del codice di selezione delle sole colonne che mi interessano e che inserirò nella tabella completa
          
          
    $query="$clausolaSelect FROM $nome_tab WHERE id>=$id1 AND id<=$id2 ORDER BY id DESC";
          
    $risultato mysql_query($query);
          
    $numcampi mysql_num_fields($risultato);

          
    $flag true;
          
    $table = array();

          
    $arrayprincipale = array();
          
    $comodo = array();


         
    // "COSTRUISCO" INDICANDO I NOMI DELLE COLONNE DELLA TABELLA - UNA DEVE ESSERE IN FORMATO STRINGA E UNA IN FORMATO NUMBER  (MODIFICATO: ENTRAMBE IN FORMATO STRINGA)

          
    for ($i=$i<$numcampi $i++)
           {
           
    $comodo_y = array('label' => mysql_field_name($risultato,$i), 'type' => 'string');
           
    array_push($arrayprincipale$comodo_y);
           }

           
    $table['cols'] = $arrayprincipale;

           
    $rows = array();
           if (
    $risultato)
            {
              while(
    $r mysql_fetch_assoc($risultato))
              {
                  
    $temp = array();
                  for (
    $i=$i<$numcampi $i++)
                   {
                    
    $temp[] = array('v' => (string) $r[mysql_field_name($risultato,$i)]);
                   }   
                  
    $rows[] = array('c' => $temp);
              }
            }

           
    $table['rows'] = $rows;
           
    $jsonTable json_encode($table);
    ?>


        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
          google.charts.load('current', {'packages':['table']});
          google.charts.setOnLoadCallback(drawTable);

          function drawTable() {
            var data = new google.visualization.DataTable(<?=$jsonTable?>);
            var table = new google.visualization.Table(document.getElementById('table_div'));
            table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
          }
        </script>
        <div id="table_div"></div>
    Secondo te da cosa dipende quell'errore?
    Ciao, grazie mille.
     
  9. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.591
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Località:
    TN
    Sicuramente dipende dal grafico che stai cercando di mettere, l'errore ti sta indicando che l'oggetto google non esiste.
    Prova a includele la libreria del grafico nella pagina principale.
    ps
    la funzione sleep(1) ritarda l'esecuzione del codice di 1 secondo come da parametro ricevuto, io l'avevo messa per simulare il lavoro del server prima di dare la risposta ma puoi toglierla non serve ad altro.
     
  10. samurai.sette

    samurai.sette Utente Attivo

    Registrato:
    17 Dicembre 2015
    Messaggi:
    132
    Mi Piace Ricevuti:
    4
    Punteggio:
    18
    Ciao Criric.
    Sei un mito!!! Funziona alla grande!!! :):):)
    Per quanto riguarda la funzione sleep(1) l'ho lasciata perchè il ritardo di 1 secondo la trovo carina per il motivo che hai scritto tu.
    Grazie mille, Ciao.
     
    A criric piace questo elemento.
Sto caricando...

Condividi questa Pagina