Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    [AJAX] Editing in place (Form multipli)

    Ho un elenco di dati (record mysql) e voglio dare la possibilità di modificarli direttamente.
    Ho cercato in giro dei plugin per jquery ma tutti permettono di modificare solamente i singoli dati.
    esempio

    DATO 1 - DATO 2 - DATO 3 - DATO 4
    DATO 1 - DATO 2 - DATO 3 - DATO 4
    DATO 1 - DATO 2 - DATO 3 - DATO 4
    DATO 1 - DATO 2 - DATO 3 - DATO 4

    I plugin che ho trovato mi permettono di modificare i singoli dati, aggiungendo un incona (modifica) al singolo


    DATO 1 () - DATO 2 () - DATO 3 () - DATO 4 ()
    DATO 1 () - DATO 2 () - DATO 3 () - DATO 4 ()
    DATO 1 () - DATO 2 () - DATO 3 () - DATO 4 ()
    DATO 1 () - DATO 2 () - DATO 3 () - DATO 4 ()

    Quello che invece voglio fare io è
    DATO 1 - DATO 2 - DATO 3 - DATO 4 ()
    DATO 1 - DATO 2 - DATO 3 - DATO 4 ()
    DATO 1 - DATO 2 - DATO 3 - DATO 4 ()
    DATO 1 - DATO 2 - DATO 3 - DATO 4 ()

    In poche parole con un click solo rendere editable tutta la riga e modificare i dati direttamente nel database mysql


    Con queli plugin posso farlo? Ce ne sono alcuni per jquery?
    Accetto anche altri framework js

  2. #2
    Puoi fare una cosa così:

    crei un CSS di questo tipo:

    codice:
    input[readonly="readonly"]{
       border: 0px none transparent;
       padding: 0;
       background-color: transparent;
    }
    in questo modo, un input in readonly è del tutto identico a del testo normale. Poi inserisci direttamente gli input type="text" nella tabella con readonly attivo.

    codice:
    <table>
       <tr>
          <td><input type="text" readonly="readonly" value="DATO1" /></td>
          <td><input type="text" readonly="readonly" value="DATO2" /></td>
          <td><input type="text" readonly="readonly" value="DATO3" /></td>
          <td><input type="text" readonly="readonly" value="DATO4" /></td>
          <td><a href = "#" class = "Toogler">[Edit]</a><td>
       </tr>
       <tr>
          <td><input type="text" readonly="readonly" value="DATO1" /></td>
          <td><input type="text" readonly="readonly" value="DATO2" /></td>
          <td><input type="text" readonly="readonly" value="DATO3" /></td>
          <td><input type="text" readonly="readonly" value="DATO4" /></td>
          <td><a href = "#" class = "Toogler">[Edit]</a><td>
       </tr>
       <tr>
          <td><input type="text" readonly="readonly" value="DATO1" /></td>
          <td><input type="text" readonly="readonly" value="DATO2" /></td>
          <td><input type="text" readonly="readonly" value="DATO3" /></td>
          <td><input type="text" readonly="readonly" value="DATO4" /></td>
          <td><a href = "#" class = "Toogler">[Edit]</a><td>
       </tr>
       <tr>
          <td><input type="text" readonly="readonly" value="DATO1" /></td>
          <td><input type="text" readonly="readonly" value="DATO2" /></td>
          <td><input type="text" readonly="readonly" value="DATO3" /></td>
          <td><input type="text" readonly="readonly" value="DATO4" /></td>
          <td><a href = "#" class = "Toogler">[Edit]</a><td>
       </tr>
    </table>
    poi crei una funzione, da associare all'evento onclick dei link con class = "Toogler" che, prenda tutti gli input della stessa riga della tabella e rimuova il readonly.

    Poi fai il submit della form con AJAX e rimetti il readonly a tutti gli input.
    I DON'T Double Click!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.