Question

Is it possible to have the Jeditable field start off in edit mode when using the datatables plugin?

Jeditable website says the solution (not using thru Datatables) :

You can trigger the used event when your document loads. For example:

$(function() {
$("#editable").trigger("click");

How do I access it in datatables, here’s my code:

    var oTable;
    $(function () {
        oTable = $('#calendarTable').dataTable({
            "bPaginate": false,
            "bSort": false,
            "bFilter": false,
            "bInfo": false,
            "aoColumns": [
                null,
                null,
                null,
                null,
                { "bVisible": false },
                { "bVisible": false },
                { "bVisible": false },
                { "bVisible": false },
                { "bVisible": false },
                { "bVisible": false },
                { "bVisible": false },
                { "bVisible": false },
                { "bVisible": false },
                { "bVisible": true }
            ]

        });

        //$("#editable").trigger("click");
        // oTable.fnGetNodes()).editable.trigger("click");

        oTable.editable("disable");

        var year;
        var lobid;
        var officeid;

        year = $('#hv_year').val();
        lobid = $('#hv_lob').val();
        officeid = $('#hv_office').val();

        var url;
        url = "save.asp";
        url = url + "?year=" + year;
        url = url + "&lobid=" + lobid;
        url = url + "&officeid=" + officeid;


        /* Apply the jEditable handlers to the table */
        $('td:eq(4)', oTable.fnGetNodes()).editable(url, {
            "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]
                };
            },
            tooltip: 'Click to Edit',
            height: "40px",
            type: 'textarea',
            onblur: 'ignore',
            cancel: 'Cancel',
            submit: 'Save',
            indicator: '<img src="images/loader.gif">'

        });

Answer 1

I think you can just chain the click:

   $('td:eq(4)', oTable.fnGetNodes()).editable(url, {
        "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]
            };
        },
        tooltip: 'Click to Edit',
        height: "40px",
        type: 'textarea',
        onblur: 'ignore',
        cancel: 'Cancel',
        submit: 'Save',
        indicator: '<img src="images/loader.gif">'

    }).trigger("click");