Row Reordering not working with several forms

rmeetin

rowReordering is not working with all of my forms that use the articles table. In order to see the problem I will need to provide your login/password (same as the past if you remember). My devel site has been moved to a subdomain.

Visit https://smo.cms7.us
Click on the gear icon then login and enter your login/password.
After signing in click on the gear once more then to Dashboard.
The representative form is located under Local --> Stories

I have other forms which are good and compared them with those failing and don't see what is different that is causing the problem. I can provide the code in both the controller file (laravel) and javascript if it helps.

Thx

kthorngren

I'm not able to login into your site. If RowReorder is not working then is sounds like the table ordering is not correct. The table needs. to be ordered by the column used as the rowReorder.dataSrc which by default is the first column. See the second paragraph in the RowReorder docs for more details.

Are you trying to save the reordering to the database, ie have rowReorder.editor configured?

You can post your Javascript code. If using rowReorder.editor then the Laravel controller code will need debugging. I don't believe Datatables provides Laravel code and its support should come from the developer of the code.

Kevin

rmeetin

Allan has an account; it's probably easier for him to take a look than you, that is, if he can find a break in the storm. That being said. The columns are good and the reorder column is the last. I have other purpose forms using the same model/method that work.

Here is what I have:

The relevant part of the articles table:

MariaDB [cms7_smo]> desc articles;

+--------------------------+------------------+------+-----+---------+----------------+
| Field                    | Type             | Null | Key | Default | Extra          |
+--------------------------+------------------+------+-----+---------+----------------+
| id                       | int(11)          | NO   | PRI | NULL    | auto_increment |
| roworder                 | int(11)          | YES  |     | NULL    |                |

The entries:

ariaDB [cms7_smo]> select id, rowOrder, title from articles where page_type='story';
+-----+----------+-----------------------------------------------------------+
| id  | rowOrder | title                                                     |
+-----+----------+-----------------------------------------------------------+
|  28 |       34 | a story                                                   |
|  79 |       76 | Quiet Life                                                |
| 131 |       10 | Dogs are loud                                             |
| 132 |        9 | Cats are furry and lovable                                |
| 133 |        8 | Aren't Rhinos cool?                                       |
| 134 |        7 | Are you a monkey?                                         |
| 135 |        6 | Try reOrdering this story to the bottom, it bounces back. |
+-----+----------+-----------------------------------------------------------+
7 rows in set (0.001 sec)

The laravel controller file section which handles the sorting:

 // ROWORDER BLOCK
  ->on('preCreate', function ($editor, $values) {
    if (!$values['articles']['rowOrder']) {
      $next = $editor->db()->sql('select IFNULL(MAX(rowOrder)+1, 1) as next FROM articles')->fetch();
      $editor->field('articles.rowOrder')->setValue($next['next']);
    } else {
      $editor->db()
    ->query('update', 'articles')
    ->set('rowOrder', 'rowOrder+1', false)
    ->where('rowOrder', $values['articles']['rowOrder'], '>=')
    ->exec();
    }
  })
  ->on('preRemove', function ($editor, $id, $values) {
    $order = $editor->db()
    ->select('articles', 'rowOrder', array('id' => $id))
    ->fetch();

    $editor->db()
    ->query('update', 'articles')
    ->set('rowOrder', 'rowOrder-1', false)
    ->where('rowOrder', $order['rowOrder'], '>')
    ->exec();
  })
  // END ROWORDER BLOCK

The HTML showing # columns:

    <table id="stories" class="table table-striped table-bordered" style="width:100%">
      <thead>
        <tr>
          <th>ID</th>
          <th>Edit</th>
          <th class='select-filter'>Publish</th>
          <th>Files</th>
          <th>Title</th>
          <th>Edit content</th>
          <th>Category</th>
          <th>Created</th>
          <th>Modified</th>
          <th>Sort</th>
        </tr>
      </thead>
    </table>

And finally the relevant JavaScript:

   ajax: { url: "stories", type: "POST", },

    select: { style: "os", selector: "td:nth-child(1), td:nth-child(4)" },
    rowReorder: { dataSrc: 'articles.rowOrder', editor: editor, selector: 'td:last-child' },
    order: [ [9, "asc"] ],

    columns: [

      { data: "articles.id" }, 
      { data: null, className: "dt-center editor-edit no-inline row-selector", defaultContent: '<i class="fa fa-edit"/>', orderable: false, searchable: false, },
      { data: "articles.publish" },
      {
        data: null,
        render: function(data, type, row) {
          return '<button class="btn file-upl mr-1" type="image" title="' + data.articles.title + ', ID#' + data.articles.id + '" row_id="' + data.articles.id + '"><span class="fa fa-image fa-uploader"></span></button>'
        },
        className: "no-inline", orderable: false, searchable: false
      },
      { data: "articles.title" },
      { data: "articles.fulltext", className: 'bubble-edit' },
      { data: "article_categories.name", editField: 'articles.catid' },
      { data: "articles.created" },
      { data: "articles.modified" },
      { name: "articles.rowOrder", data: "articles.rowOrder", className: "reorder no-inline", },

    ],

    columnDefs: [
    ]

  } );

  cms.createDTEButtons(table, editor);
  cms.inlineEdit("stories", editor, table);
  cms.generateMetaData(editor);

  editor

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

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

rmeetin

Sorry the editor broke up some of the code that was pasted, separating it into two sections.

kthorngren

Sorry the editor broke up some of the code that was pasted, separating it into two sections.

Thats because you didn't use the Markdown code formatting with triple back ticks (```) around the code blocks.

I'm not familiar with your Laravel code. Since editor: editor is defined the server code needs to update the DB correctly and provide the updated rows back to the client. The client side Editor will send the updated articles.rowOrder values to the server to update the DB. The server will return the updated rows. See the client/server data exchange docs for details.

Maybe this will help you to troubleshoot while waiting for Allan. See this example. Open the browser's network inspector to view the XHR request and response. Reorder some rows and, if using Chrome, go to the Payload tab. This will show the modified information sent, for example:

data[row_2][readingOrder]: 4
data[row_3][readingOrder]: 2
data[row_4][readingOrder]: 3
action: edit

Click the Preview tab to see the response, for example:

[
  {
    "DT_RowId": "row_2",
    "title": "The Name of the Wind",
    "author": "Patrick Rothfuss",
    "duration": "983",
    "readingOrder": "4"
  },
  {
    "DT_RowId": "row_3",
    "title": "The Blade Itself: The First Law",
    "author": "Joe Abercrombie",
    "duration": "1340",
    "readingOrder": "2"
  },
  {
    "DT_RowId": "row_4",
    "title": "The Heroes",
    "author": "Joe Abercrombie",
    "duration": "1390",
    "readingOrder": "3"
  }
]

Are you seeing the correct information sent to the server?

Are you seeing the articles.rowOrder values updated correctly in the response?

Kevin