How to add a double click to edit (inline editing)

Question

anyone could help me how to add a function that will double click to edit. Right now it is only a single click to edit

    <script>
    function showEdit(editableObj) {
        $(editableObj).css("background","#FFF");
    } 

    function saveToDatabase(editableObj,column,id) {
        $(editableObj).css("background","#FFF url(ajax-loader.gif) no-repeat right");
        $.ajax({
            url: "update.php",
            type: "POST",
            data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
            success: function(data){
                $(editableObj).css("background","#FDFDFD");
                  // $.notify('Document Updated',{close: true, color: "#fff", background: "#20D67B",animationType:"drop"})
            }        
       });
    }
    </script>

Answer 1

I assume you want to call showEdit function after double click so to make that work simply go with a counter variable to check click count.

<script>
var clickCount = 0;

function showEdit(editableObj) {
    clickCount++;
    if(clickCount == 2){
        $(editableObj).css("background","#FFF");
        clickCount = 0;
    }        
} 

function saveToDatabase(editableObj,column,id) {
    $(editableObj).css("background","#FFF url(ajax-loader.gif) no-repeat right");
    $.ajax({
        url: "update.php",
        type: "POST",
        data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
        success: function(data){
            $(editableObj).css("background","#FDFDFD");
              // $.notify('Document Updated',{close: true, color: "#fff", background: "#20D67B",animationType:"drop"})
        }        
   });
}
</script>