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

samurai.sette

Utente Attivo
17 Dic 2015
234
6
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.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, con cosa devi aggiornarlo ? devi prendere dati da un database ?
 

samurai.sette

Utente Attivo
17 Dic 2015
234
6
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.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ajax,
separi il codice php dall'html e aggiorni il div senza ricaricare la pagina. Facile :)
se vuoi ti posto un esempio
 

samurai.sette

Utente Attivo
17 Dic 2015
234
6
18
Ciao Criric. Grazie mille per la risposta.
Mi potresti postare un esempio? Te ne sarei infinitamente grato.
Ciao, grazie mille.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
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.
 

samurai.sette

Utente Attivo
17 Dic 2015
234
6
18
Ciao Criric. Grazie mille, il codice che mi hai scritto fa esattamente quello che volevo.
Grazie, grazie, grazie.
Ciao.
 
  • Like
Reactions: criric

samurai.sette

Utente Attivo
17 Dic 2015
234
6
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 + 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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
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.
 

samurai.sette

Utente Attivo
17 Dic 2015
234
6
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.
 
  • Like
Reactions: criric
Discussioni simili
Autore Titolo Forum Risposte Data
M [Javascript] Aggiornare like totali dopo click Javascript 0
M [Javascript] [PHP] aggiornare pagina ogni ora Javascript 2
B [Javascript] Cambiare classe ed aggiornare relativi eventi Javascript 3
D [Javascript] aggiornare numero caratteri se campo già popolato Javascript 5
Metazoo Recuperare variabile php da javascript senza aggiornare pagina PHP 5
L countdown multiplo javascript Javascript 0
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 0
F Creare elementi html con javascript Javascript 2
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
G [Javascript] Errore inserimento dati Backend Node.js e workbench Javascript 1
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
D [Javascript] inserire uno script in un file php Javascript 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1

Discussioni simili