Databases
StackOverflow2013
Postsdbo
POjQuery drag & drop table rows sort not working
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery drag & drop table rows sort not working
    primarykey
    data
    text
    <p>I wanted to make a script to order some rows from a database with drag &amp; drop. The rows are displayed in a table, and I drag and drop rows to reorder them. Each tr have the row id from database. When I drag and drop a row, jquery serialize the table content and sends it to php to save rows position.</p> <p>What could be the problem that rows position are not saved in db?</p> <p><strong>Table with rows:</strong></p> <pre><code>$select_categories = mysqli_query($db_connect, "SELECT `id`, `title` FROM `categories` ORDER BY `category_order` ASC") or die(mysqli_error()); if(mysqli_num_rows($select_categories) != 0) { echo '&lt;table cellpadding="0" cellspacing="0" class="manage_content" id="sort_rows" align="center"&gt;'; while($category = mysqli_fetch_assoc($select_categories)) { echo ' &lt;tr id="row-'.$category['id'].'"&gt; &lt;td width="700"&gt;&lt;a href="'.$website_address.'/admin/categories_edit.php?id='.$category['id'].'"&gt;'.$category['title'].'&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a href="'.$website_address.$_SERVER['PHP_SELF'].'?action=delete_content&amp;amp;id='.$category['id'].'" class="delete_content"&gt;Delete&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; '; } echo '&lt;/table&gt;'; } </code></pre> <p><strong>jQuery</strong></p> <pre><code>$("#sort_rows tbody").sortable({ cursor: 'move', delay: 180, update: function() { var rowsOrder = $(this).sortable("serialize"); $.post("ajax_actions.php", { action:'change_rows_order', table:'categories', order:'category_order', rows_order:rowsOrder } ); } }).disableSelection(); </code></pre> <p><strong>AJAX</strong></p> <pre><code>if(isset($_POST['action']) &amp;&amp; $_POST['action'] == 'change_rows_order') { $order_no = 1; foreach($_POST['rows_order'] as $row_id) { $update_order = mysqli_query($db_connect, "UPDATE `".clear_tags($_POST['table'])."` SET `".clear_tags($_POST['order'])."` = '".$order_no."' WHERE `id` = '".$row_id."'") or die(mysqli_error()); $order_no++; } } </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;table cellpadding="0" cellspacing="0" class="manage_content" id="sort_rows" align="center"&gt; &lt;tr id="row-10"&gt; &lt;td width="700"&gt;&lt;a href="http://local.admin.com/admin/categories_edit.php?id=10"&gt;Editorial&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a href="http://local.admin.com/admin/index.php?action=delete_content&amp;amp;id=10" class="delete_content"&gt;Delete&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="row-11"&gt; &lt;td width="700"&gt;&lt;a href="http://local.admin.com/admin/categories_edit.php?id=11"&gt;Fashion&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a href="http://local.admin.com/admin/index.php?action=delete_content&amp;amp;id=11" class="delete_content"&gt;Delete&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="row-12"&gt; &lt;td width="700"&gt;&lt;a href="http://local.admin.com/admin/categories_edit.php?id=12"&gt;Street Style&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a href="http://local.admin.com/admin/index.php?action=delete_content&amp;amp;id=12" class="delete_content"&gt;Delete&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="row-13"&gt; &lt;td width="700"&gt;&lt;a href="http://local.admin.com/admin/categories_edit.php?id=13"&gt;Portraits&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a href="http://local.admin.com/admin/index.php?action=delete_content&amp;amp;id=13" class="delete_content"&gt;Delete&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="row-14"&gt; &lt;td width="700"&gt;&lt;a href="http://local.admin.com/admin/categories_edit.php?id=14"&gt;Clothing&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a href="http://local.admin.com/admin/index.php?action=delete_content&amp;amp;id=14" class="delete_content"&gt;Delete&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USsorinu26
    1. USsorinu26
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COfar too many unknowns here. What troubleshooting steps have you taken?
      singulars
      1. POjQuery drag & drop table rows sort not working
      1. UScharlietfl
    2. CO@charlietfl I don't know how to pass the serialized data to AJAX, I think that's the problem. Basically when I drag and drop a row, I want to pass an array containing all rows to AJAX and then to save their position in db.
      singulars
      1. POjQuery drag & drop table rows sort not working
      1. USsorinu26
    3. COshould be already passing the data...inspect request in browser console network tab to see what is sent
      singulars
      1. POjQuery drag & drop table rows sort not working
      1. UScharlietfl
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload