Editor - Changes to JSON structure after ugrading from 1.8.1 to 1.9.0

craiggriffin

Hi,

After upgrading to 1.9.0, the returned POSTDATA json string is not being processed. Here is a stringified simple example (2 validation errors)
{"data":[],"fieldErrors":[{"name":"lpattgds","status":"Value must be entered."},{"name":"lpviewid","status":"Value must be entered."}],"error":""}

If I rollback to 1.8.1 , everything works okay and the errors are displayed, or the updated data is diplayed in the table.

Regards,

Craig.

craiggriffin

Here is another example of a JSON object that is processed correctly in 1.8.1 , but fails to process in 1.9.0:

{
"data": [
{
"DT_RowId": 197,
"ucactcode": "A00002",
"ucactcded": "Review Exception5 6s352de",
"ucactnot": "Please review this exception and correct if necessary.notes",
"lw3shpurl": "http://www.lansa.com"
}
],
"fieldErrors": [],
"error": ""
}

allan

Hi,

Thanks for posting this. I've not seen that problem I'm afraid - could you give me a link to your page so I can take a look and see what is going wrong?

Thanks,
Allan

craiggriffin

Hi Allan,

Thank you for replying.

Unfortunately our development server is behind a firewall and the server processing is written using LANSA which requires licensing to port elsewhere. I will see if I can get a tunnel opened.

Is there some console.log statements I can insert in your JavaScript (dataTables.editor.js, editor.bootstrap.js) to troubleshoot in the meantime?

Regards,

Craig.

allan

I'm not sure where to start is the problem - as this should be working .

Perhaps you can show me your Javascript for the Editor and DataTable initialisation?

Thanks,
Allan

craiggriffin

I have set up a Global JS File with defaults:

$.extend(true, $.fn.dataTable.defaults, {
    dom: "<'row'<'col-3'l><'col-3'f><'col-6'p>>" +
    "<'row'<'col-12'tri>>",
    autoWidth: true,
    responsive: true,
    select: true,
    colReorder: false,
    scrollY: '78vh',
    scrollX: false,
    scrollCollapse: true,
    lengthChange: true,
    lengthMenu: [[10, 25, 50, 100, 250, 500, 1000, -1], [10, 25, 50, 100, 250, 500, 1000, "All"]],
    ajax: {
        dataSrc: function (data) {
            var lData = transformWebroutineData('loadData', data.webroutine);
            return lData;
        },
        type: "POST",
        data: function (d) {
            return postData('loadData');
        },
        dataType: "json",
        contentType: "application/json; charset=utf-8",
    },
    processing: true
});

$.extend(true, $.fn.dataTable.Editor.defaults, {
    display: "bootstrap",
    ajax: {

        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: 'POST',
        data: function (d) {
            return postData(gEditorAction);
        },
    },
    table: "#editorTable",
    template: "#editorForm",
    formOptions: {
        main: {
            buttons: true,
            focus: 0,
            message: true,
            onBackground: 'blur',
            onBlur: 'none',
            onComplete: 'close',
            onEsc: 'close',
            onFieldError: 'focus',
            onReturn: 'none',
            submit: 'all',
            title: false,
            drawType: false,
            scope: 'row'
        },
        inline: {
            onBlur: true
        }
    }
});

Then for the specific object there is a js file:

function DTE_Definition()  {
            
    gEditor = new $.fn.dataTable.Editor({
        
        ajax: {
                url: wamUrl(gWam, 'wAction')
    },
    
            fields: [{
                    label: "Action Code:",
                    name: "ucactcode"
                }, {
                    label: "Description:",
                    name: "ucactcded"
                }, {
                    label: "Notes:",
                    name: "ucactnot",
                    type: "textarea"
                }, {
                    label: "Tracking URL:",
                    name: "lw3shpurl",
                    type: "textarea"
                }
            ]
        });

    gTable = $('#editorTable').DataTable({
        
            ajax: {
                url: wamUrl(gWam, 'wLoadData')
            },

            columns: [{
                    data: "ucactcode"
                }, {
                    data: "ucactcded"
                }, {
                    data: "ucactnot"
                }, {
                    data: "lw3shpurl"
                }
            ],
            
        });

};

And a specific HTML include:

<div id="editorForm">

    <div>
        <editor-field name="ucactcode"/>
    </div>
    <div>
        <editor-field name="ucactcded"/>
    </div>
    <div>
        <editor-field name="ucactnot"/>
    </div>
    <div>
        <editor-field name="lw3shpurl"/>
    </div>
    <div>
        <fieldset >
            <legend>User View</legend>
            <div id="uv_ucactnot">
            notes
            </div>  
            <div>
                <a media="screen" id="uv_hyperLink" >
                hyperlink
                </a>
            </div>
            <div style="display:none" id="uv_hyperLink_error" class="alert alert-danger" role="alert">
            error message
            </div>  
        </fieldset>
    </div>

</div>

<table id="editorTable" class="table table-striped table-bordered wrap">
    <thead>
        <tr>

            <th>Code</th>
            <th>Description</th>
            <th>Notes</th>
            <th>Link</th>

        </tr>
    </thead>
</table>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

This looks a little odd:

        data: function (d) {
            return postData(gEditorAction);
        },

Its not using the data being submitted by Editor at all. That shouldn't stop a success callback though.

In the dataTables.editor.js file if you find the line:

complete: [ function ( xhr, text ) {

and as the first line inside that function add a console.log(xhr, text);.

Can you show me what that output is please?

Thanks,
Allan

craiggriffin

Hi Allan ,

The Post is working for 1.8.1 and 1.9.0 . I use postData(action) to modify the JSON string for the LANSA expected format. Rows are being created/deleted/updated on the server in both versions.

Version 1.8.1 (working - displays errors in editor form) and 1.9.0 (not working. editor form closes and rows in table are not updated) have identical trace strings.

craiggriffin

````
dataTables.editor.js
complete: [ function ( xhr, text ) {
// Use complete rather than success so that all status codes are
// caught and can return valid JSON (useful when working with REST
// services).
trace('dte.js' + ': ' + xhr.responseText + ' - ' + text);

output:
dte.js: {"webroutine":{"context":{"action-request":"/CGI-BIN/lansaweb","dec-separator":".","images-path":"/images","iso-lang":"en","language":"ENG","partition":"UCP","service-name":"KWDTE01_wAction","session-key":"","session-key-method":"hidden","session-key-name":"_SESSIONKEY","technology-service":"LANSA:XHTML","user-id":"PCXUSER","webapplication":"KWDTE01","webapplication-title":"Workflow Action Code Maintenance","webroutine":"wAction","webroutine-title":""},"fields":{"W_ERROR":{"type":{"t":"H","l":8000},"value":""}},"lists":{"L_DATA":{"header":[{"name":"R_RRN","type":{"t":"I","l":8}},{"name":"UCACTCODE","type":{"t":"A","l":6}},{"name":"UCACTCDED","type":{"t":"A","l":30}},{"name":"UCACTNOT","type":{"t":"A","l":225}},{"name":"LW3SHPURL","type":{"t":"A","l":256}}],"entries":[]},"L_ERROR":{"header":[{"name":"R_FIELD","type":{"t":"H","l":10}},{"name":"R_ERROR","type":{"t":"H","l":1024}}],"entries":[["ucactcode","Value must be entered."],["ucactcded","Value must be entered."]]}}}} - success

In my JS.

gEditor.on('postSubmit', function (e, json, data, action, xhr) {
gElementFocus = false;
gPostSubmit = true;
var debug = true;
json = transformWebroutineData(action, json.webroutine);
gPostSubmit = false;
trace(JSON.stringify(json));
return json;
});

output:
{"fieldErrors":[{"name":"ucactcode","status":"Value must be entered."},{"name":"ucactcded","status":"Value must be entered."}],"data":[]}

```

craiggriffin

allan

I'm afraid I honestly don't know - I'd need to be able to debug it directly. Any luck with the tunnel?

Thanks,
Allan

craiggriffin

Sorry Allan,

The IT guy is not going to open up a port for me .

I'll just stay with 1.8.1 until I can port an example for at a later stage.

Thank you for looking at this. BTW , I've been using DataTables extensively for years (image below of current application). Currently trying to get Editor adapted using a POC. 1.9.0 has some needed enhancements (Bootstrap 4 , Row Sorting , Upload ) .

Pretty busy right now, if I can get some time I'll install a local version and open a port into my local pc. For now , It looks pretty good with 1.8.1.

Kind Regards,

Craig.

craiggriffin

allan

That would be awesome - thanks. When you get a chance to set it up, drop me a PM by clicking my name above and then "Send message".

Allan