No POST on rowreorder drop

No POST on rowreorder drop

psenechalpsenechal Posts: 32Questions: 2Answers: 0

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.

Replies

  • allanallan Posts: 63,578Questions: 1Answers: 10,483 Site admin

    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

  • psenechalpsenechal Posts: 32Questions: 2Answers: 0

    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.

  • allanallan Posts: 63,578Questions: 1Answers: 10,483 Site admin

    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

  • psenechalpsenechal Posts: 32Questions: 2Answers: 0

    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.

  • psenechalpsenechal Posts: 32Questions: 2Answers: 0

    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.

  • psenechalpsenechal Posts: 32Questions: 2Answers: 0
    edited February 2016

    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

  • allanallan Posts: 63,578Questions: 1Answers: 10,483 Site admin

    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

  • psenechalpsenechal Posts: 32Questions: 2Answers: 0

    Thanks! I'll give that a shot

  • anthonysanthonys Posts: 19Questions: 4Answers: 0

    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.

This discussion has been closed.