Question

I have written a code to integrate timepicker with editable which is being used to make all coulmns except the hidden id coulmn and the first shown coulmn editable . I couldn’t get the fnupdate make my edited coulmn to be updated to the new value when it is posted to server side . I am able to get the posted values for server side processing but the clientside is not gettting updated by fnupdate .

Please see the code below and try to tell me what i am doing wrong because i am having many pages which function the same way .

    $(document).ready(function() {

        oTable = $('#scheduleTable').dataTable(
        {
            "sDom"          : '<"top"flip>rt<"bottom"<"clear">',
            "bAutoWidth"    : false,
            "bProcessing"   : true,
            bJQueryUI:true,
            "bServerSide": true,
            "bFilter":false,
            "bSort": false,
            "bInfo": false,
            "bPaginate":false,
            "aoColumns":[
                {
                    "bVisible" : false
                },
                {
                },
                {},
                {},
                {},
                {}
            ],
            "fnRowCallback" : function (nRow, aData, iDisplayIndex) {
                $(nRow).attr('id', '' + aData[0]);
                //i starting from one to make the first element in td non editable
                for (i = 1; i < aData.length; i ++) {
                    $('td:eq(' + i + ') ', nRow).editable("<?= $aupdateUrl; ?>", {
                        'callback': function (sValue, y) {
                            var aPos = oTable.fnGetPosition(this);
                            oTable.fnUpdate(sValue, aPos[0], aPos[1]);

                        },
                        "submitdata": function ( value, settings ) {
                            return {
                                "row_id": this.parentNode.getAttribute('id'),
                                "column": oTable.fnGetPosition( this )[2]
                            };
                        },
                        'height': '14px',
                        indicator : 'Saving...',
                        tooltip : 'Doubleclick to edit...',
                        type       : "timepicker",
                        placeholder : '&nbsp;'
                    });
                }

                return nRow;
            },

            "sAjaxSource"   : "<?= $aSourceList; ?>/startdate/<?= $this->startdate; ?>"
        }
    );
    });
    $('.ui-datepicker-close').live('click', function (e){
        e.preventDefault();
        $('#scheduleTable tbody td input').parents("form").submit();
    });

$.editable.addInputType('timepicker',{
        /*create input element*/
        element:function(settings,orginal){
            var form = $(this),
            input = $('<input type="text">');
            form.append(input);
            return (input);
        },

        plugin:function(settings,original){

            /*Don't cancel inline editing onblur to allow clicking datepicker*/
            settings.onblur = 'nothing';
            $("input",this).filter(":text").timepicker(
            {   timeFormat: 'hh:mm',
                'hourMin':6,
                'hourMax':21,
                'showSecond': false,
                'hourGrid':2,
                'minuteGrid':10

            }
        );
        }
    });

Answer 1

I was able to solve the problem .The main thing that i was doing wrong was that i didn’t have json response with only one value from my server side zend framework action.Therefore it caused the editable to function in a way that it couldn’t put the value(the response) as the new value in the td element. Hope some on find it usefull peace!!