Custom Edit and Remove using Datatable Editor is giving null or not an object exception

PDas15

Hi, I'm working on a project where I need to implemenet custom Edit & Remove functionality for datatables. I'm trying to incorporate Editor object to edit/remove rows from table. But while trying to submit for edit/remove I'm getting this js exception "'0.aoData[...].nTr' is null or not an object". Not sure what I'm missing here. Can anyone please advise?

Here is my jQuery code:

var wireTable;
var editor;
var wireDetails = "${ wireDetailList }";

$(document).ready(function(){

wireTable = $('#wiredtlstbl').dataTable({
    "pagingType":       "full_numbers",
    "lengthMenu":       [[10, 25, 50, -1], [10, 25, 50, "All"]],
    "searching" :       true,
    "scrollY":          400,
    "scrollCollapse":   true,               
    "jQueryUI":         true,
    "processing":       false,
    "serverSide":       false   
    //"ajax":           "${pageContext.request.contextPath}/wireDetails/getWireDetails",
    //"data":               wireDetails
    /* "columns":           [
                            { "data": null, "defaultContent": '', "orderable": false },
                            { "data": "planNum" },
                            { "data": "paymentMethod" },
                            { "data": "wireReceivedTS" },
                            { "data": "wireReceivedAmt" },
                            { "data": "linkedIds" },
                            { "data": "wireExptdDate" },
                            { "data": "wireExptdAmt" }
                        ] */

    });


$('#wiredtlstbl tbody').on( 'click', 'tr', function () {
    if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
        $('#edit').attr("disabled", true);
        $('#delete').attr("disabled", true);
    }
    else {
        wireTable.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
        $('#edit').attr("disabled", false);
        $('#delete').attr("disabled", false);
    }
} );

editor = new $.fn.dataTable.Editor( {       
    //ajax: "${pageContext.request.contextPath}/wireDetails/getWireDetails",
    ajax: {            
            edit: {
                type: 'PUT',
                url:  '${pageContext.request.contextPath}/wireDetails/getWireDetails'
            },
            remove: {
                type: 'DELETE',
                url:  '${pageContext.request.contextPath}/wireDetails/getWireDetails'
            }
        },
    table: "#wiredtlstbl",
    display: 'envelope',
    fields: [ {
            label: "Plan Number :",
            name: "planNum"
        }, {
            label: "Payment Method :",
            name: "paymentMethod"
        }, {
            label: "Wire Received Date & Time :",
            name: "wireReceivedTS"
        }, {
            label: "Wire Received Amount :",
            name: "wireReceivedAmt"
        }, {
            label: "Link Id :",
            name: "linkedIds"
        }, {
            label: "Wire Expected Date :",
            name: "wireExptdDate"
        }, {
            label: "Amount Expected :",
            name: "wireExptdAmt"
        }
    ]
} );


$('#edit').click( function (e) {
    alert('Clicked Edit');
    //alert('wireDetails  ---> '+ wireDetails);
    e.preventDefault();

    editor
        .title( 'Edit Wire Detail' )
        .buttons( { "label": "Update", "fn": function () { this.submit() } } )
        .edit();    

} );

$('#delete').click( function (e) {
    alert('Clicked Delete');

    //e.preventDefault();

    editor
        .title( 'Delete Wire Detail' )
        .message( "Are you sure you wish to delete this record?" )
        .buttons( { 
            label : "Delete", 
            fn    : function () { alert('Deleting row'); this.submit(); } 
        } )
        .remove('#wiredtlstbl tbody tr');
} );

/* $('#edit').on( 'click', function () {
    editor
        .buttons( {
            label: "Save",
            fn: function () { this.submit(); }
        } )
        .edit();
} ); */

});

allan

Can you confirm what getWireDetails is returning when the submission is complete please? Does it confirm to the Editor client / server requirements?

Allan

PDas15

Hi Allan,

Thanks for your response. Well I've not used JSON object for getWireDetails. Actually that is already being painted from my Spring Controller as : model.addAttribute("wireDetailList", wireDetailList);

So I'm trying use the same view data and then edit/delete each row based on user action. I'm not sure whether the JSON is mandatory here but I think I need it more while submitting back the rows using edit/delete functionality. I'm kind doing it first so little uncertain on how to map these elements correctly. Please advise.

<body>

<jsp:include page="../include/header.jsp"></jsp:include>

<a href='searchWireDtls' style='position: absolute; top: 100px; right: 180px'> Return to Wire Search </a>

<h3>View Wire Details</h3>

<div id="tableDiv" align="center">

    <form action="${pageContext.request.contextPath}/wireDetails/updateWireDetails">
    
        <table id="wiredtlstbl" class="display" >
            <thead>
                <tr>
                    <!-- <th></th> -->
                    <th>Plan Number</th>
                    <th>Payment Method</th>
                    <th>Wire Received Date &amp; Time</th>
                    <th>Wire Received Amount</th>
                    <th>Link Ids</th>
                    <th>Wire Expected Date</th>
                    <th>Amount Expected</th>
                    <th style="display:none;"></th>
                </tr>
            </thead>    
            <tbody>
            <c:if test="${not empty wireDetailList}">
                <c:forEach items="${ wireDetailList }" var="wireDtls">
                    <tr>
                        <!-- <td><input type="checkbox" id="checkedWireDtls" name="checkedWireDtls" /></td> -->
                        <td><c:out value="${wireDtls.planNum}"></c:out></td> 
                        <td><c:out value="${wireDtls.paymentMethod}"></c:out></td> 
                        <td><c:out value="${wireDtls.wireReceivedTS}"></c:out></td>
                        <td><c:out value="${wireDtls.wireReceivedAmt}"></c:out></td>                    
                        <td><c:out value="${wireDtls.linkedIds}"></c:out></td>                  
                        <td><c:out value="${wireDtls.wireExptdDate}"></c:out></td>
                        <td><c:out value="${wireDtls.wireExptdAmt}"></c:out></td>
                        <td style="display:none;"><c:out value="${wireDtls.tieBrkrNum}"></c:out></td>
                    </tr>   
                </c:forEach>
            </c:if>     
            </tbody>    
        </table>
        
        <button id="edit" class="display" type="button" disabled="disabled">Edit</button>       
        <button id="delete" class="display" type="button" disabled="disabled">Delete</button>
        
    </form>
    
</div>

<script type="text/javascript">

var wireTable;
var editor;
var wireDetails = "${ wireDetailList }";

$(document).ready(function(){
            
    wireTable = $('#wiredtlstbl').dataTable({
        "pagingType":       "full_numbers",
        "lengthMenu":       [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "searching" :       true,
        "scrollY":          400,
        "scrollCollapse":   true,               
        "jQueryUI":         true,
        "processing":       false,
        "serverSide":       false
        //"ajax":           "${pageContext.request.contextPath}/wireDetails/getWireDetails",
        //"data":               wireDetails   
        /*"columns":            [
                                { "data": null, "defaultContent": '', "orderable": false },
                                { "data": "wireDetails.planNum" },
                                { "data": "wireDetails.paymentMethod" },
                                { "data": "wireDetails.wireReceivedTS" },
                                { "data": "wireDetails.wireReceivedAmt" },
                                { "data": "wireDetails.linkedIds" },
                                { "data": "wireDetails.wireExptdDate" },
                                { "data": "wireDetails.wireExptdAmt" },
                                { "data": "wireDetails.tieBrkrNum" }
                            ] */

        });
    
    
    $('#wiredtlstbl tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
            $('#edit').attr("disabled", true);
            $('#delete').attr("disabled", true);
        }
        else {
            wireTable.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
            $('#edit').attr("disabled", false);
            $('#delete').attr("disabled", false);
        }
    } );
    
    editor = new $.fn.dataTable.Editor( {       
        //ajax: "${pageContext.request.contextPath}/wireDetails/getWireDetails",
        ajax: {            
                edit: {
                    type: 'PUT',
                    url:  '${pageContext.request.contextPath}/wireDetails/updateWireDetail'
                },
                remove: {
                    type: 'DELETE',
                    url:  '${pageContext.request.contextPath}/wireDetails/deleteWireDetail'
                }
            },
        table: "#wiredtlstbl",
        display: 'envelope',
        fields: [ {
                label: "Plan Number :",
                name: "planNum"
            }, {
                label: "Payment Method :",
                name: "paymentMethod"
            }, {
                label: "Wire Received Date &amp; Time :",
                name: "wireReceivedTS"
            }, {
                label: "Wire Received Amount :",
                name: "wireReceivedAmt"
            }, {
                label: "Link Id :",
                name: "linkedIds"
            }, {
                label: "Wire Expected Date :",
                name: "wireExptdDate"
            }, {
                label: "Amount Expected :",
                name: "wireExptdAmt"
            }
        ]
    } );
    
 
    $('#edit').click( function (e) {
        alert('Clicked Edit');
        //alert('wireDetails  ---> '+ wireDetails);
        //e.preventDefault();
        
        editor
            .title( 'Edit Wire Detail' )
            .buttons( { "label": "Update", "fn": function () { this.submit() } } )
            .edit();            
                    
    } );
    
    $('#delete').click( function (e) {
        alert('Clicked Delete');
        
        //e.preventDefault();
         
        editor
            .title( 'Delete Wire Detail' )
            .message( "Are you sure you wish to delete this record?" )
            .buttons( { 
                label : "Delete", 
                fn    : function () { alert('Deleting row'); this.submit(); } 
            } )
            .remove('#wiredtlstbl tbody tr');
            //.remove(row).submit();
    } );
    
    /* $('#edit').on( 'click', function () {
        editor
            .buttons( {
                label: "Save",
                fn: function () { this.submit(); }
            } )
            .edit();
    } ); */
    
});

</script>

</body>

</html>

allan

I'm not sure whether the JSON is mandatory here

It is yes. The Editor manual describes the data sent to and from the server. If you are not using the libraries provided with the Editor package (PHP and .NET libraries available) then you will need to implement that protocol in your own scripts.

You could, if that is not possible, use the ajax option to perform a custom Ajax request which would give you the ability to submit the data and take returned data that you can then transform into the format that Editor requires before passing that data back into the callback functions.

Allan

PDas15

Thanks Allan for your response and suggestion. However I also modified my server-side code and created json object in controller class to pass to view as below:

WiresDataTableParameters dataTableParam = new WiresDataTableParameters();
            dataTableParam.setAaData(wireDetailList);
            dataTableParam.setiTotalRecords(wireDetailList.size());
            Gson gson = new GsonBuilder().setPrettyPrinting().create();
            wireDetailsJson = gson.toJson(dataTableParam);
            System.out.println("wireDetailsJson ---> "+wireDetailsJson.toString());
            try {
                response.setContentType("application/Json");
                response.getWriter().write(wireDetailsJson);
            } catch (IOException e) {
                logger.error("IOException caught : "+e.getMessage());               
            }
            model.addAttribute("wireDetailsJsonAttr",wireDetailsJson);  
                        retURL = "wireDetails/viewWireDtls";

---

Simultaneously I have modified my jsp code to read and process json object from controller as below. Surprisingly I'm getting exception like "Expected ';' " or "Unexpected String Constant" on the very first line of my json object while I'm trying to assign it to a JS variable to populate table data.

//var jsonData = eval('('+'${wireDetailsJson}'+')');
var jsonData = '${wireDetailsJson}';

$(document).ready(function(){

    //var jsonData = ${wireDetailsJsonAttr};
    //alert('jsonData '+jsonData);
    wireTable = $('#wiredtlstbl').dataTable({
        "pagingType":       "full_numbers",
        "lengthMenu":       [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "searching" :       true,
        "scrollY":          400,
        "scrollCollapse":   true,               
        "jQueryUI":         true,
        "processing":       false,
        "serverSide":       true,
        "data":             jsonData,   
        "columns":          [
                                //{ "data": null, "defaultContent": '', "orderable": false },
                                { "data": "planNum" },
                                { "data": "paymentMethod" },
                                { "data": "wireReceivedTS" },
                                { "data": "wireReceivedAmt" },
                                { "data": "linkedIds" },
                                { "data": "wireExptdDate" },
                                { "data": "wireExptdAmt" },
                                { "data": "tieBrkrNum" }
                            ]

        });

Can you please advise what's wrong I'm doing here?

Thanks,

allan

Don't use eval! Use $.parseJSON - http://api.jquery.com/jquery.parsejson/ .

Beyond that, we would need to see what the wireDetailsJson value actually is.

Allan

PDas15

Thanks Allan for your valuable suggestion. Will try this out and let you know the results.