Furtiro Furtiro - 1 month ago 16
Javascript Question

Jquery datatable makeEditable update without pressing enter

This is my code right now :

$('#positionsCapteurs').dataTable({

"paging": false,
"ordering": false,
"info": false,
"bJQueryUI": true,
"bFilter": false,

"columnDefs": [{
"targets": 0,
"orderable": false
}]
}).makeEditable(
{


sUpdateURL:"/Appareils/UpdateData",


});


I create a dataTable and make it editable,it works well like that, but i want to allow the user to update the data without pressing enter key, i found a property to do that :
onblur : 'submit'
.
I tried to add this to my options ( dataTable or makeEditable) and it didn't works.

How can i add this option and allow the user to press enter, or not, to update the data ?

Thanks in advance

Answer

EDIT: I figured it out for you.

The following code adds a custom handler. You can create your ajax request in the onblur.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Datatable Save on blur</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.12.3.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">
    </script>
    <script type="text/javascript" language="javascript" class="init">

        $(document).ready(function() {
            $('#positionsCapteurs').DataTable( {
                 "paging":   false,
                "ordering": false,
                "info":     false,
                "bJQueryUI": true,
                "bFilter": false,

                "columnDefs": [{
                    "targets": 0,
                    "orderable": false
                }]
            });

            $('#positionsCapteurs').on('click', 'tbody td', function (e) {
                // check if inout does not already exist
                if ( $(this).html().indexOf('input') == -1 ) {
                    var rel = $(this).attr('rel');
                    var fieldname = $(this).attr('fieldname');
                    var val = $(this).html();
                    $(this).html(inlineEdit(this, rel, fieldname, val));
                    var myTd = this;
                    // implement the blur
                    $("#" + rel + '_' + fieldname ).on('blur', function() {
                        // create ajax call to save data
                        /*
                        $.ajax({
                          url: "backendscript.php",
                          method: "POST",
                          data: { id : rel, fieldname: fieldname, val: $(this).val() }
                        }).done(function( html ) {
                            stopEdit(this, myTd);
                        });
                        */
                        stopEdit(this, myTd); // comment this out when ajax call is impleneted stopEdit should be done when ajax call is done
                    });
                    // implement the enter press
                    $("#" + rel + '_' + fieldname ).on('keypress', function(event) {
                        if ( event.keyCode == 13 ) {
                            $(this).trigger('blur');
                        }
                    });
                    // focus the input
                    $("#" + rel + '_' + fieldname ).focus();
                    // put the cursor on the end
                    var tmpStr = $("#" + rel + '_' + fieldname ).val();
                    $("#" + rel + '_' + fieldname ).val('');
                    $("#" + rel + '_' + fieldname ).val(tmpStr);
                }
            });
        });
        // generate input
        function inlineEdit(td, rel, fieldname, val) {
            return $('<input/>').attr({ type: 'text', rel: rel, name: fieldname, autofocus: 'true', value: val, id: rel + '_' + fieldname})
        }

        // stop input
        function stopEdit(input, myTd) {
            $(myTd).html($(input).val());
        }
    </script>
</head>
<body>
<div class="container">
    <table id="positionsCapteurs" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Col3</th>
                <th>Col4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rel="1" fieldname="name">Olivier</td>
                <td rel="1" fieldname="pos">Developer</td>
                <td rel="1" fieldname="col3">val3</td>
                <td rel="1" fieldname="col4">val4</td>
            </tr>
            <tr>
                <td rel="2" fieldname="name">Olivier2</td>
                <td rel="2" fieldname="pos">Developer2</td>
                <td rel="2" fieldname="col3">val32</td>
                <td rel="2" fieldname="col4">val42</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>