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

samurai.sette · 20 Mar 2017

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.

criric · 21 Mar 2017

Ciao, con cosa devi aggiornarlo ? devi prendere dati da un database ?

samurai.sette · 22 Mar 2017

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.

criric · 22 Mar 2017

Ajax,
separi il codice php dall'html e aggiorni il div senza ricaricare la pagina. Facile

se vuoi ti posto un esempio

samurai.sette · 22 Mar 2017

Ciao Criric. Grazie mille per la risposta.
Mi potresti postare un esempio? Te ne sarei infinitamente grato.
Ciao, grazie mille.

criric · 22 Mar 2017

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.

samurai.sette · 22 Mar 2017

Ciao Criric. Grazie mille, il codice che mi hai scritto fa esattamente quello che volevo.
Grazie, grazie, grazie.
Ciao.

samurai.sette · 17 Apr 2017

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
    $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 + 1 - $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=0 ; $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=0 ; $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.

criric · 17 Apr 2017

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.

samurai.sette · 17 Apr 2017

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.

Cerca

Cerca

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

samurai.sette

Utente Attivo

criric

Super Moderatore

samurai.sette

Utente Attivo

criric

Super Moderatore

samurai.sette

Utente Attivo

criric

Super Moderatore

samurai.sette

Utente Attivo

samurai.sette

Utente Attivo

criric

Super Moderatore

samurai.sette

Utente Attivo

Discussioni simili