No POST on rowreorder drop

psenechal

Hello...I'm using the rowreorder extenstion with DataTables 1.10.10 and Editor 1.5.4.

The rowreorder plugin appears to be working fine and I can move rows around, however, nothing happens when I drop the row. I have added the following code to my config:

    table.on('row-reorder', function(e, details, changes) {
      editor.edit(changes.nodes, false, {
        submit: 'changed'
      }).multiSet(changes.dataSrc, changes.values).submit();
    });

and placed an alert() in that block to make sure it is being called on drop...it is, however, I don't see any type of POST action to the urls to update the database like I do in the example. There are no errors in the console either. Here is the complete page code for the table:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<div class="container" ng-controller="adminReportTypeCtrl">
    <div data-ng-include src="'resources/template/alert.jsp'"></div>
    <div class="block-header">
        <h2>Report Types</h2>
    </div>
    <div class="card">
        <div class="card-body card-padding">
            <div class="text-right m-b-25">
                <button class="btn btn-primary editor_create">
                    <i class="zmdi zmdi-plus"></i> Add a Record
                </button>
            </div>
            <table class="table table-bordered table-striped table-vmiddle datatable">
                <thead>
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Show In Menu</th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">
  var editor;
  var table;

  $(function() {
    editor = new $.fn.dataTable.Editor({
      ajax: {
        create: {
          type: 'POST',
          url: '<c:url value="/admin/reporttype"/>'
        },
        edit: {
          type: 'PUT',
          url: '<c:url value="/admin/reporttype"/>'
        },
        remove: {
          type: 'DELETE',
          url: '<c:url value="/admin/reporttype"/>'
        }
      },
      table: '.datatable',
      idSrc: 'id',
      fields: [{
        label: 'Sort Order',
        name: 'sortOrder'
      }, {
        label: 'Name',
        name: 'name'
      }, {
        label: 'Description',
        name: 'description'
      }, {
        label: 'Show In Menu',
        name: 'showInMenu'
      }]
    });

    editor.on('open', function(e, type) {
      $('.DTE_Field_Input .DTE_Field_InputControl').addClass('fg-line');
      $('.DTE_Field_Input input').addClass('form-control');
    });

    editor.on('preSubmit', function(e, data, action) {
      if (action !== 'remove') {
        var name = editor.field('name');

        if (!name.val()) {
          name.error('Name is required');
        }

        if (this.inError()) { return false; }
      }
    });

    editor.on('postCreate postRemove', function() {
      table.ajax.reload(null, false);
    }).on('initCreate', function() {
      editor.field('sortOrder').enable();
    }).on('initEdit', function() {
      editor.field('sortOrder').disable();
    });

    // New record
    $('.editor_create').on('click', function(e) {
      e.preventDefault();

      editor.title('<h4>Create new record</h4>').buttons([{
        'label': 'Cancel',
        'className': 'btn-default waves-effect',
        'fn': function() {
          editor.close()
        }
      }, {
        'label': 'Add',
        'className': 'btn-primary waves-effect',
        'fn': function() {
          editor.submit()
        }
      }]).create();
    });

    // Edit record
    $('.datatable').on('click', 'a.editor_edit', function(e) {
      e.preventDefault();

      editor.title('<h4>Edit record</h4>').buttons([{
        'label': 'Cancel',
        'className': 'btn-default waves-effect',
        'fn': function() {
          editor.close()
        }
      }, {
        'label': 'Update',
        'className': 'btn-primary waves-effect',
        'fn': function() {
          editor.submit()
        }
      }]).edit($(this).closest('tr'));
    });

    // Delete a record
    $('.datatable').on(
            'click',
            'a.editor_remove',
            function(e) {
              e.preventDefault();

              editor.title('<h4>Delete record</h4>').message(
                      'Are you sure you wish to remove this record?').buttons(
                      [{
                        'label': 'Cancel',
                        'className': 'btn-default waves-effect',
                        'fn': function() {
                          editor.close()
                        }
                      }, {
                        'label': 'Delete',
                        'className': 'btn-danger waves-effect',
                        'fn': function() {
                          editor.submit()
                        }
                      }]).remove($(this).closest('tr'));
            });

    table = $('.datatable')
            .DataTable(
                    {
                      ajax: '<c:url value="/admin/reporttype"/>',
                      columns: [
                          {
                            data: 'sortOrder',
                            className: 'pl-10 reorder'
                          },
                          {
                            data: 'name',
                            className: 'nowrap'
                          },
                          {
                            data: 'description',
                            width: '100%'
                          },
                          {
                            data: 'showInMenu',
                            className: 'text-center nowrap'
                          },
                          {
                            data: null,
                            className: 'text-right nowrap pr-10',
                            defaultContent: '<a href="" class="editor_edit"><i class="zmdi zmdi-hc-2x zmdi-edit c-gray"></i></a> <a href="" class="editor_remove m-l-10" tooltip-placement="top" tooltip="Delete"><i class="zmdi zmdi-hc-2x zmdi-delete c-gray"></i></a>'
                          }],
                      columnDefs: [
                          {
                            render: function(data, type, row) {
                              return '<span style="display: none;">'
                                      + data
                                      + '</span>'
                                      + '<span><i class="zmdi zmdi-hc-2x zmdi-arrows"></i></span>';
                            },
                            orderable: true,
                            targets: 0
                          }, {
                            orderable: false,
                            targets: '_all'
                          }],
                      oLanguage: {
                        oPaginate: {
                          sNext: '<i class="zmdi zmdi-chevron-right"></i>',
                          sPrevious: '<i class="zmdi zmdi-chevron-left"></i>'
                        }
                      },
                      rowReorder: {
                        dataSrc: 'sortOrder',
                        snapX: 10,
                        editor: editor
                      }
                    });
    table.on('row-reorder', function(e, details, changes) {
      editor.edit(changes.nodes, false, {
        submit: 'changed'
      }).multiSet(changes.dataSrc, changes.values).submit();
    });
  });
</script>

any ideas on what I might be missing would be greatly appreciated. Thanks.

allan

You shouldn't actually need to listen for the row-reorder event if you have the rowReorder.editor option specified.

What you have looks like it should work other than that. Are you able to give me a link to the page so I can debug it?

Allan

psenechal

When I wasn't seeing the automatic post after the drop event, I added the row-reorder event just to make sure, but based on the example, I figured it was supposed to automatically run.

Unfortunately, I cannot provide a working link since this is an internal application behind about 5 firewalls =)

This particular table with row-reorder is in an AngularJS application. The regular posts for Editor (create, update, delete) work perfectly fine, but I'm wondering if Angular is somehow squashing the post request for row-reorder.

Do you know of any existing concerns with using this inside an Angular app?

Thanks.

allan

The main issue when using Angular as well is to make sure that Angular isn't rewriting the DOM. You obviously can't have both DataTables and Angular trying to control the same DOM elements - that would be a nightmare!

However, I haven't used Angular much myself so i can't offer too much guidance there I'm afraid.

One thing that would be worth trying, if you haven't already, is to use the nightly versions of DataTables and RowReorder.

Allan

psenechal

Hi Allan,

I pulled everything out of Angular and now it's in a regular jsp application. Still can't seem to get the RowReorder to do anything on drop (with or without the row-reorder event).

I'll try the nightly versions to see if it makes any difference. Thanks.

psenechal

Hi Allan,

No difference at all with the nightly builds. I did notice if I change the dataSrc option in the rowReorder section to something other than one of my column data names, I get an error...which would indicate to me that it's attempting to do something. So strange...I'm not sure what else to try.

psenechal

Hi Allan,

I figured out what is causing the rowReorder to not post. I have the following 'preSubmit' function for validation that is causing the update method to fail and any error messaging to be swallowed:

editor.on('preSubmit', function(e, data, action) {
        if (action !== 'remove') {
          var name = editor.field('name');

          if (!name.val()) {
            name.error('Name is required');
          }

          if (this.inError()) { return false; }
        }
      });

Is there a way to still include a preSubmit validation when using rowReorder? Thanks

allan

There are a few options. One might be to listen for row-reorder and if detected set a boolean flag to indicate that RowReorder was activated. Then add a check in your preSubmit event handler for that flag. If set, reset it and don't execute the validation.

The row-reorder event will trigger before preSubmit, so this should work nicely.

Allan

psenechal

Thanks! I'll give that a shot

anthonys

If anyone else has this issue - double check the data in your ordering column is different. If you swap two items with the same order value, editor is smart enough to realise there is no update to perform and won't swap two values that are the same.