Edit an entity using DataTables (JQuery) and send it via javascript

Question

I m using Datatables for my data, but now i want that the user can modify the data stored on the db. So I read that i can use jeditable, but I do not know how to send data to the server when you press the enter key. I read this question: Link but i don't know how to implement it. Can anyone help me? I need to do this with the second table example :

<form action="/repairServlet" method="post">
<input type="hidden" name="action" value="aggiorna">
<input type="hidden" name="keycar" value="<%=KeyFactory.keyToString(keycar)%>">
<input type="hidden" name="plate" value="<%=repair.getProperty("plate")%>">
<input type="hidden" name="km" value="<%=repair.getProperty("km")%>">
 <input type="hidden" name="keyRepair" value="<%=KeyFactory.keyToString(repairKey)%>">
    <table width="200" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td>Data Riparazione</td>
                <td><input type="date" name="date" value="<%=(String)repair.getProperty("date") %>" /></td>
                <td>Stato</td>
                <td><select  name="selectStato" size="3" multiple="multiple"
                    tabindex="1">
                        <option value="1">In corso</option>
                        <option value="2">Sospesa</option>
                        <option value="3">Conclusa</option>
                </select>
                <td>KM</td>
                <td><input type="text" name="km" value="<%=(String)repair.getProperty("km") %>" /></td>
                <td>Targa</td>
                <td><h4>
                        <label> &nbsp <%=(String)repair.getProperty("plate") %></label>
                    </h4></td>
            </tr>

        </tbody>
    </table>



    <table cellpadding="0" cellspacing="0" border="0" class="display"
        id="example">
        <thead>
            <tr>
                <th>Indice</th>
                <th>Tipo</th>
                <th>Descrizione</th>
                <th>Quantità</th>
                <th>Prezzo</th>
                <th>Totale</th>
                <th>Azioni</th>
            </tr>
        </thead>
        <tbody>
         <%for(Entity lr : listaRepairs){ %>    

            <tr>
                <td>ddd</td>
                <td><% out.print(lr.getProperty("type"));%></td>
                <td><% out.print(lr.getProperty("description"));%></td>
                <td><% out.print(lr.getProperty("qta"));%></td>
                <td><% out.print(lr.getProperty("price"));%></td>
                <td><% out.print(lr.getProperty("tot"));%></td> 
                <td><input type="submit" name="Aggiorna" /></td>                
            </tr>       


            <%-- <tr>
                <td>ddd</td>

                <td><input type="text" name="type" value="<%=lr.getProperty("type") %>" />
                     <input type="hidden" name="keyLineRepair" value="<%=KeyFactory.keyToString(lr.getKey())%>">
                </td>
                <td><input type="text" name="description" value="<%=lr.getProperty("description") %>"/></td>
                <td><input type="text" name="qta" value="<%=lr.getProperty("qta") %>"/></td>
                <td><input type="text" name="price" value="<%=lr.getProperty("price") %>" /></td>
                <td><%=lr.getProperty("tot") %></td>
                <td><input type="submit" name="Aggiorna" /></td>
            </tr> --%>
            <%} %>
        </tbody>
    </table>

Answer 1

Looking at the docs:

 $(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php');
 });

Code above does several things: Elements with class edit become editable. Editing starts with single mouse click. Form input element is text. Width and height of input element matches the original element. If users clicks outside form changes are discarded. Same thing happens if users hits ESC. When user hits ENTER browser submits text to save.php at www.example.com.

So in your code, give the table an id and then do something like:

$(document).ready(function() {
         $('#mytable').editable('http://<your domain/repairServlet');
     });