我有一个包含有可排序行的表的表单。排序工作正常,行排序的位置存储在数据库中。保存是通过提交表单和ajax调用来完成的。
在以前的版本中,我用一个按钮完成了提交,这段代码很好地保存了数据库中的所有内容。现在我想取消按钮,因为用户往往忘记按下保存。
现在,在将一行向上或向下移动之后,将调用updateProductSortOrder()函数,但没有提交表单。
我在这里读了很多关于堆叠溢出和其他资源的问题,我不知道我做错了什么。
var bundleApiUrl = 'bundleApi.php';
if (typeof jQuery.fn.sortable !== "undefined") {
$(function () {
$('#sortableRows').sortable({
start: function (event, ui) {
var start_pos = ui.item.index();
ui.item.data('start_pos', start_pos);
},
update: function (event, ui) {
var index = ui.item.index();
var start_pos = ui.item.data('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);
}
}
updateProductSortOrder();
},
axis: 'y'
});
});
}
function updateProductSortOrder() {
var form = document.getElementById('updateSortOrder');
$("#updateSortOrder").submit(
$.ajax({
url: bundleApiUrl,
method: 'POST',
data: new FormData(form),
contentType: false,
cache: false,
processData: false,
beforeSend: function () {
$("#err").fadeOut();
},
success: function (result) {
var resultArray = JSON.parse(result);
console.log(resultArray);
},
error: function (xhr, desc, err) {
console.log(xhr);
console.log("Details: " + desc + "\nError:" + err);
}
})
);
}
.row-resize {
cursor: row-resize;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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">
<thead>
<tr>
<th>Sort order</th>
<th>Quantity</th>
<th>Product Name</th>
<th>Product Model</th>
<th>Product ID</th>
<th>Group Name</th>
</tr>
</thead>
<tbody id="sortableRows">
<tr id="unique-2" class="row-resize">
<td class="sortOrder">0</td>
<td>1</td>
<td>Matrox G400 32MB</td>
<td>MG400-32MB</td>
<td>2</td>
<td>Graphic Cards</td>
</tr>
<tr id="unique-1" class="row-resize">
<td class="sortOrder">1</td>
<td>1</td>
<td>Matrox G200 MMS</td>
<td>MG200MMS</td>
<td>1</td>
<td>Graphic Cards</td>
</tr>
<tr id="unique-5" class="row-resize">
<td class="sortOrder">2</td>
<td>1</td>
<td>Microsoft IntelliMouse Pro</td>
<td>MSIMPRO</td>
<td>3</td>
<td>Mice</td>
</tr>
<tr id="unique-6" class="row-resize">
<td class="sortOrder">3</td>
<td>1</td>
<td>Microsoft IntelliMouse Explorer</td>
<td>MSIMEXP</td>
<td>26</td>
<td>Mice</td>
</tr>
<tr id="unique-3" class="row-resize">
<td class="sortOrder">4</td>
<td>1</td>
<td>Microsoft Internet Keyboard PS/2</td>
<td>MSINTKB</td>
<td>25</td>
<td></td>
</tr>
</tbody>
</table>
<input type="hidden" name="view" value="updateSortOrder" />
</div>
</form>
</div>
发布于 2018-08-23 09:37:55
解决方案是在这里给出的,但我也会在这里张贴。
var form = document.getElementById('updateSortOrder');
,因为new FormData(form)
不会填充谢谢你@jonatjano和Martin
代码示例已经更新。
发布于 2018-08-23 08:03:09
使用onblur事件。使用按钮,您可能会有一个onclick事件。
https://stackoverflow.com/questions/51980908
复制相似问题