Ricaricare un div al click di un pulsante

[utentedisperato]

Salve a tutti,
sono vicino alla soglia della pazzia! Spero possiate darmi una mano perchè ho fatto un casino di ricerca in merito ma non riesco a risolvere il problema.

Sto generando una tabella 4x4 -con uno script in php- che contiene 16 elementi booleani estratti da un database: ogni cella contiene un elemento e sotto ognuno di essi c'è un pulsante che, con comandi html e javascript, cambia lo stato dell'elemento stesso.
In particolare, al click del pulsante, con onclick() richiamo una funzione javascript che lancia sul server uno script php, atto a fare lo switch del valore dell'elemento memorizzato sul database.

Subito dopo viene eseguita la funzione $('#button').click(function(){ $('#div-table').load(location.href + ' #div-table >*'); })
che ricarica solo la tabella (non tutta la pagina) per fare un refresh degli elementi mostrati nelle celle.

Di seguito c'è il codice completo. E' tutto funzionante, solo che è possibile far eseguire tutte le operazioni correttamente -aggiornamento valore elemento nel database, refresh visualizzazione tabella- una volta sola, cliccando su uno dei 16 pulsanti presenti, dopodichè funziona solo onclick (aggiornando correttamente il dato nel database) mentre il .load sembrerebbe smettere di funzionare perchè non fa il refresh del div.

Gentilmente, potreste darmi una mano? Vi ringrazio.

<?php

... CONNESSIONE AL SERVER MYSQL E QUERY

if ($query = mysqli_query($_SESSION['connection'], $sql)) {
  // CREAZIONE TABLELLA DEI 16 ELEMENTI BOOLEANI RESTITUITI DALLA QUERY
   echo '<div id="div-ioTable"><center><table><tr>';
   for ($i = 0; $i < 16; ++$i) {
      mysqli_data_seek($query, $i);
      $result = mysqli_fetch_assoc($query);
      if ($result['field_value'] == 0){     //IL RECORD HA UN CAMPO "filed_value"
         $link_img = 'images/0.png';
      }
      else {
         $link_img = 'images/1.png';
      }
      if ($i>0){if ($i%4 == 0){   // LA TABELLA E' 4x4
         echo '</tr><tr>';
      }}
      echo "<td><div align='center' style='display : block; width : 120px; height : 120px; overflow: auto'><img src='".$link_img."' width='40' height='40'><br>";
      echo "<a  id='button-".$result['field_name']."' onclick='doChangingState("\".$result['field_name']."\");'><button>On / Off</button></a>";
      echo '</div></td>';
   }
   echo '</tr></table>';
   echo '</center></div>';

  echo "<script type='text/javascript'>
              function doChangingState(data) {
                  //AL CLICK DEL PULSANTE RICHIAMA LO SCRIPT CHE FA LO SWITCH DELL'i-esimo' DATO BOOLEANO
                  $.get('scripts/switch-value.php?data='+data);
                  return false;
              });
          </script>";
   for ($i = 0; $i < 16; ++$i) {
       mysqli_data_seek($query, $i);
       $result = mysqli_fetch_assoc($query);
       echo "<script type='text/javascript'>
                   $(function() {
                      $('#button-".$result['field_name']."').click(function() {
                         $('#div-ioTable').load(location.href + ' #div-ioTable>*');
                      });
                   }
               </script>";
   }

   mysqli_free_result($query);}

... CHIUSURA CONNESSIONE AL SERVER

?>

[cavicchiandrea]

Ciao è benvenuto
A) Posta solo codice html il php confonde ed è ininfluente per js
B) al secondo click il load viene eseguito?
C) da errori la console?
D) metti un link alla pagina pubblica spesso aiuta a trovare una soluzione

[utentedisperato]

Ciao cavicchiandrea ,

A) Di seguito posto il codice privo di sintassi php: spero di non fare errori nell'estrapolazione.
B) Sinceramente non riesco a capire se il load viene nuovamente eseguito: scriverò un paio di righe ad hoc per capire se lo riesegue. Appena possibile lo faccio e farò sapere.
C) ...come faccio a capirlo? Al momento uso Google Chrome e clicco su "Ispeziona elemento": non rilevo nessun errore ma non so se è sufficiente per dire che il codice è privo di errori.
D) La pagina è offlline e lavoro in locale.

Non so se il problema deriva da come uso il metodo .load()...

<div id="div-ioTable">
   <table>
      <tr>
         <td>
            <div align='center' style='display : block; width : 120px; height : 120px; overflow: auto'>
               <img src='".$link_img."' width='40' height='40'><br>
               <a  id='button-01' onclick='doChangingState("DATA01");'>
                  <button>0 / 1</button>
               </a>
            </div>
         </td>

         <td>
            .............
         </td>
      </tr>
      <tr>
            .............
      </tr>
   </table>
</div>

<script type='text/javascript'>
   function doChangingState(data) {
      //AL CLICK DEL PULSANTE RICHIAMA LO SCRIPT CHE FA LO SWITCH DEL DATO BOOLEANO
      $.get('scripts/switch-value.php?data='+data);
      return false;
   });

  $(function() {
      $('#button-01').click(function() {
         $('#div-ioTable').load(location.href + ' #div-ioTable >*');
      });
   }
</script>

[cavicchiandrea]

A) esegui la pagina in locale tasto destro copia sorgente pagina
B/C) installi firebug (c'è anche per chrome) lo apri e visioni le chiamate Ajax
D) ci sono hosting free tipo altervista, spesso una pagina test vale 100 post

[utentedisperato]

Ok, appena posso lo faccio e posto il risultato.