jQuery UI — jQueryUI.Sortable обновление без использования Ajax в качестве обычной формы, отправьте в Stack Overflow

Я хотел бы отсортировать таблицу со строкой данных из MySQL, затем изменить порядок и отправить его.
Я использовал jQueryUI.sortable, чтобы сделать эти теги (строки) перетаскиваемыми.
Но когда я отправлял форму, некоторые из них не меняли порядок.

Зачем? Я попытался выяснить это, я var_dump отправил данные и обнаружил проблему:
Тег tr (строка), который я переместил из исходного порядка, не перейдет в PHP, поэтому var_dump не покажет идентификатор строки.

Чтобы было легче понять, я выкладываю свой код здесь:

HTML-код

<table>
<thead>
<tr>
<th>Subject</th>
<th>Content</th>
</tr>
</thead>
<tbody id="sortable">
<tr>
<td>
Hello World
<input name="displayorder[]" type="hidden" value="1" />
</td>
<td>I come from Mars!</td>
</tr>
<tr>
<td>
Hello Mars
<input name="displayorder[]" type="hidden" value="2" />
</td>
<td>I come from Jupiter!</td>
</tr>
<tr>
<td>
Hello StackOverflow
<input name="displayorder[]" type="hidden" value="3" />
</td>
<td>I come from North Korea ...</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2"><input type="submit" value="Submit!" />
</tr>
</tbody>
</table>

Я опустил содержание формы, потому что это не важно

JavaScript (сортируемая библиотека загружена)

$(document).ready(function() {
$('#sortable').sortable({
helper: fixHelper,
axis: 'y',
opacity: 0.6,
}).disableSelection();
});

var fixHelper = function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
};

PHP

$displayorder = $_POST["displayorder"];
if($displayorder != "") {
$order = 1;
foreach($displayorder as $value) {
mysql_query("UPDATE message SET displayorder=$order WHERE announcementid=$value");
$order++;
}
}

Я предпочитаю не использовать Ajax для этого, потому что у меня есть десятки похожих страниц для выполнения той же задачи.
Заранее спасибо.

0

Решение

Ну, я решил закодировать каждую страницу.
Код сейчас:

JavaScript

$(document).ready(function() {
$('#sortable').sortable({
helper: fixHelper,
axis: 'y',
opacity: 0.4,
update: function(event, ui){
var data = $(this).sortable('serialize');

$.ajax({
data: data,
type: 'POST',
url:  '/update.php?action=displayorder'
});
},
}).disableSelection();
});

var fixHelper = function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
};

PHP

foreach($_POST["displayorder"] as $i => $value) {
mysql_query("UPDATE message SET displayorder=$i WHERE announcementid=$value");
$i++;
}
1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]