Using jquery + jeditable + bootstrap to add editable new row on a table

Question

I have test may way to do the trick but nothing is really a good solution. I need jeditable + datatable for other display. That's why jeditable is mandatory.

I'm trying to use jquery + jeditable on a table (id,type,phone,default) to do :

1. Add row/remove row (remove if val 2 & 3 are empty)
2. Edit field 1 & 2 of the new row added

HTML :

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js"></script>

<h4>Tél <button id="add-phone" class="btn btn-mini btn-primary" type="button"> + </button></h4>
<table border="1" width="80%">
    <tr>
        <th>id</th>
        <th>Type</th>
        <th>Tel</th>
        <th></th>
    </tr>
    <tr>
        <td>1</td>
        <td class="dblclick">mob</td>
        <td class="dblclick">0000000</td>
        <td><input type="radio" name="1-tel-default" id="1-tel-default-1" value="1" /></td>
    </tr>
    <tr>
        <td>2</td>
        <td class="dblclick">mob</td>
        <td class="dblclick">0000000</td>
        <td><input type="radio" name="1-tel-default" id="1-tel-default-2" value="1" /></td>
    </tr>
        <tr>
        <td>3</td>
        <td class="dblclick">mob</td>
        <td class="dblclick">0000000</td>
        <td><input type="radio" name="1-tel-default" id="1-tel-default-3" value="1" /></td>
    </tr>
</table>

Javascript :

$(document).ready(function(){ 

    $(".dblclick").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", { 
        indicator : "Loading...",
        submit: 'Ok',
        cancel: 'Cancel',
        tooltip   : "Double-click for edit...",
        event     : "dblclick",
        style  : "inherit"
    });

    // trigger event when button is clicked
    $("#add-phone").click(function()
    {
        //alert("click");

        // add new row to table using addTableRow function
        var clone = $("#phonelist tbody tr:last")
        .clone()
        .find('td')
        .text('Edit')
        .end()
        .insertAfter("#phonelist tbody tr:last");

        /*$('#phonelist tbody tr:last').after('<tr id="last" ><td class="dblclick">Editer</td><td class="dblclick">Editer</td><td><input type="radio" name="default" id="default-last" value="0"></td></tr>');*/

        // prevent button redirecting to new page
        return false;
    });

});

This is my test jeditable on jsfiddle : http://jsfiddle.net/supersonique/ncHQ5/

Thanks for your help.

Answer 1

For deleting a row if the values 2 & 3 are blank, try using callback. In the function, value is the return value of POST " http://www.appelsiini.net/projects/jeditable/php/echo.php ". So make it return "delete" if you want the row to be deleted. Also it would have to do the deletion in your database/data storage.

$(".dblclick").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", { 
    indicator : "Loading...",
    submit: 'Ok',
    cancel: 'Cancel',
    tooltip   : "Double-click for edit...",
    event     : "dblclick",
    style  : "inherit",
    callback: function(value, setting) {
      if(value == "delete") $(this).parent().hide();
    }
});

You may have to play around with the number of .parent() functions used, depending on how deeply nested your clicked element is vs the row element.

Also if you are adding a new row that you want to use jeditable, then instead of binding jeditable at document ready, bind it on document click, so that every time you click newly added rows will have the editable behavoir bound to them.

$(document).on('click', function() {
  // your jeditable stuff here
});