preEdit

Erik Skov

I need to convert the text in one field from whatever the user typed in to Title case. see the function below.

I am running Editor 1.7.4

The console log entries in
show that the value

AB EriK WAS HERE

is changed to

Ab Erik Was Here

But the new value is not being saved to the database and rewritten to the listing.

Here is my js

/* table.businesses.js
 * 2022.09.21 ES cloned from another DTE project, configured.
 *
 * defined in jsp: companyId, officeId, hasEdit, mailChangesTo
 */

(function ($) {

    $(document).ready(function () {

        // prevents datatables default obtrusive developer alert message and allows table specific error handling
        // NOTE: this means errors from DT Editor will NOT be displayed - must handle errors manually
        $.fn.dataTable.ext.errMode = 'none';

        var editor = new $.fn.dataTable.Editor({
            ajax: {
                url: './table.businesses.php',
                type: "POST",
                data: function ( d ) {
                    d.mailChangesTo = mailChangesTo;
                }
            },
            table: '#businesses',
            fields: [
                {
                    "label": "Company:",
                    "name": "rr_office.parent_company",
                    "type": "select",
                    "def": ( companyId > -1 ? companyId : ""),
                     placeholder: "Select Company"
                }

                , { "label": "Office:",
                    "name": "processing.office_id",
                    "type": "select",
                     "def": ( officeId > -1 ? officeId : ""),
                     placeholder: "Select Office"
                }
                , { "label": "Busonder:",
                    "name": "processing.business"
                }
                , { "label": "Claim Prefix:",
                    "name": "processing.claim_prefix"
                }
                , { "label": "Vehicle State:",
                    "name": "processing.vehicle_state",
                    "type": "select",
                    "placeholder" : "Select state"
                }
            ]
        });

        // set up dependency
        //editor.dependent("rr_office.parent_company", '../offices/company-offices.php');
        editor.dependent("rr_office.parent_company", function(val, data, callback) {
            console.log("Bus ed.dep parent_company val: "+val);
            $.ajax({
                type: "POST",
                url: '../company-offices.php',
                data: {
                    dte_table: "processing",
                    parent_company: val
                },
                dataType: 'json',
                success: function (json) {
                     callback(json);
                }
            });
        });

        editor.on( 'preEdit', (e, id, values) => {
            var oldBus = editor
                        .field( 'processing.business' )
                        .get();
            console.log("Bus ed.dep business get: "+oldBus);

            var newBus = toTitleCase(editor
                        .field( 'processing.business' )
                        .get());
            console.log("Bus ed.dep business titled: "+newBus);

            editor
                .field( 'processing.business' )
                .set(
                    toTitleCase(editor
                        .field( 'processing.business' )
                        .get())
                );

            var updatedBus = editor
                        .field( 'processing.business' )
                        .get();
            console.log("Bus ed.dep business updated: "+updatedBus);

        } );

        // display technical error message
        editor.on("submitError", function (e, xhr, err, thrown, data) {
            editor.error("An error has occurred, " + err + ": " + xhr.responseText);
        });

        var table = $('#businesses').DataTable({
            //ajax: '/office/demo/table.zip_codes.php',
            ajax: {
                url: './table.businesses.php',
                type: "POST",
                data: function ( d ) {
                    d.companyId = companyId;
                    d.officeId = officeId;
                }
            },
            serverSide: true,
            lengthMenu: [
                [ 10, 25, 50, -1 ],
                [ '10 rows', '25 rows', '50 rows', 'Show all (Slow!!)' ]
                ],
            // "dom": 'Blfrtip',
            columns: [
                { "data": "processing.business"}
                , { "data": "comp_name"}
                , { "data": "office_code"}
                , { "data": "office_name"}
                , { "data": "processing.claim_prefix"}
                , { "data": "processing.vehicle_state"}

                ,{ "data": "processing.id"}
            ],
            select: 'single'/*,
            lengthChange: false*/
        });

        table.on('error', function (e, settings, techNote, message) {
            $("#loginErrorDialog").dialog("open");
            console.log(techNote);
            console.log(message);
        });

        new $.fn.dataTable.Buttons(table, [

            { extend: 'collection',
                text: 'Export',
                buttons: [
                    'copy',
                    'excel',
                    'csv',
                    'pdf',
                    'print'
                ]
            }
        ]);

        var defaultInsert = 1;  // would like this to be a count of buttons so far.

        if(hasEdit){
            // add the create button.
            table.button().add( defaultInsert
                , {extend: "create"
                , editor: editor});

            // add the edit button.
            table.button().add( defaultInsert
                , {extend: "edit"
                , editor: editor});

            // add the delete button.
            table.button().add( defaultInsert
                , {extend: "remove"
                , editor: editor});

        }

        table.buttons().container()
                .prependTo($('div.fg-toolbar:eq(0)', table.table().container()));

    });


}(jQuery));

function toTitleCase(str) {
  return str.replace(
    /\w\S*/g,
    function(txt) {
      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }
  );
}

I have a feeling it might be scope related, but if I define
editor.on( 'preEdit', (e, id, values) => {
as
editor.on( 'preEdit', (editor, id, values) => {
I get errors of editor.field is not a function.

Does this need to be done in the php side? Using
->on( 'preEdit', function ( $editor, $id, &$values ) {

If so, can you direct me to an example?

kthorngren

editor.on( 'preEdit', (editor, id, values) => {
I get errors of editor.field is not a function.

The preEdit event shows the parameters being sent into the function. The first is e which is the jQuery event object. Your are changing the variable name to editor so now editor.field(..) is using the jQuery event object, not the var editor = new $.fn.dataTable.Editor(..) variable.

Looking at the Editor Edit event sequence it looks like preEdit happens after the edited data has been sent to the server and the updated row data returned. Looks like you will want to use preSubmit instead.

Kevin

Erik Skov

That was it. I moved the preEdit to the PHP.

->on( 'preEdit', function ( $editor, $id, &$values ) {
    getPrevValues($editor->db(), $editor->table()[0], $id);

    $oldRep = $values['processing']['business'];

    $_SESSION["REP_old"] = $oldRep;

    $newRep = titleCaseSpecial($oldRep);

    $_SESSION["RESP_new"] = $newRep;

    $editor
        ->field( 'processing.business' )
        ->setValue($newResp);
} )

function titleCaseSpecial($string) {
return ucwords(strtolower($string));
}

Erik Skov

I had to add the functionality to preCreate as well.

->on( 'preCreate', function ( $editor, &$values ) {
    $editor
        ->field( 'table.column' )
        ->setValue(titleCaseSpecial($values['table']['column']));
} )