2018-08-23 07:58
浏览 99


I have a form that contains a table with sortable rows. The sorting works fine, the position of the row sort is stored in a database. The saving is done by submitting the form and an ajax call.

In a previous version I did the submitting with a button, and this code worked just fine saving everything in the database. Now I want to eliminate the button, because users tend to forget to press save.

Now after moving a row up or down the updateProductSortOrder() function is called, but the form is not submitted.

I read through many questions here on stackoverflow, and other resources, and I can not figure out what I am doing wrong.

var bundleApiUrl = 'bundleApi.php';
if (typeof jQuery.fn.sortable !== "undefined") {
  $(function () {
      start: function (event, ui) {
        var start_pos = ui.item.index();'start_pos', start_pos);
      update: function (event, ui) {
        var index = ui.item.index();
        var start_pos ='start_pos');

        //update the html of the moved item to the current index
        $('#sortableRows tr:nth-child(' + (index + 1) + ') .sortOrder').html(index);
        $('#sortableRows tr:nth-child(' + (index + 1) + ') .sortOrderValue').val(index);

        if (start_pos < index) {
        //update the items before the re-ordered item
          for (var i = index; i > 0; i--) {
            $('#sortableRows tr:nth-child(' + i + ') .sortOrder').html(i - 1);
            $('#sortableRows tr:nth-child(' + i + ') .sortOrderValue').val(i - 1);
        } else {
        //update the items after the re-ordered item
          for (var i = index + 2; i <= $("#sortableRows tr .sortOrder").length; i++) {
            $('#sortableRows tr:nth-child(' + i + ') .sortOrder').html(i - 1);
            $('#sortableRows tr:nth-child(' + i + ') .sortOrderValue').val(i - 1);
      axis: 'y'
function updateProductSortOrder() {
  var form = document.getElementById('updateSortOrder');
      url: bundleApiUrl,
      method: 'POST',
      data: new FormData(form),
      contentType: false,
      cache: false,
      processData: false,
      beforeSend: function () {
      success: function (result) {
        var resultArray = JSON.parse(result);
      error: function (xhr, desc, err) {
        console.log("Details: " + desc + "
Error:" + err);
.row-resize {
  cursor: row-resize;
<link href="" rel="stylesheet"/>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<div class="container-fluid">
  <form name="updateSortOrderForm" method="post" id="updateSortOrder" class="form-horizontal">
    <div class="row">
      <input type="hidden" name="bundleId" value="180" />
      <table class="table table-striped">
            <th>Sort order</th>
            <th>Product Name</th>
            <th>Product Model</th>
            <th>Product ID</th>
            <th>Group Name</th>
        <tbody id="sortableRows">
          <tr id="unique-2" class="row-resize">
            <td class="sortOrder">0</td>
            <td>Matrox G400 32MB</td>
            <td>Graphic Cards</td>
          <tr id="unique-1" class="row-resize">
            <td class="sortOrder">1</td>
            <td>Matrox G200 MMS</td>
            <td>Graphic Cards</td>
          <tr id="unique-5" class="row-resize">
            <td class="sortOrder">2</td>
            <td>Microsoft IntelliMouse Pro</td>
          <tr id="unique-6" class="row-resize">
            <td class="sortOrder">3</td>
            <td>Microsoft IntelliMouse Explorer</td>
          <tr id="unique-3" class="row-resize">
            <td class="sortOrder">4</td>
            <td>Microsoft Internet Keyboard PS/2</td>
      <input type="hidden" name="view" value="updateSortOrder" />

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

2条回答 默认 最新

  • dongna9185 2018-08-23 09:37

    The solution was given in the coments, but I will post them here too

    1. replace everything in updateProductSortOrder by $("#updateSortOrder").submit () because submit(function (){}) will launch the function when the EventSubmit is launched from the element while submit() (without argument) will submit the form as if you clicked on a
    2. Added var form = document.getElementById('updateSortOrder');, because new FormData(form) would not populate

    Thank you @jonatjano and @Martin for your help

    The code example has been updated

    解决 无用
    打赏 举报

相关推荐 更多相似问题