如何将JQuery UI可排序表位置保存到MySQL数据库？ [英] How do I save JQuery UI sortable table positions to MySQL database?
问题描述
我的应用程序所做的是，通过MySQL将项目列表加载到表中。
What my application does is, loads a list of items into a table, via MySQL.
我可以加载表格，但我需要这样做表中的项目可以重新排列，并将它们的位置存储回MySQL服务器。
I can load the table fine, but I need to make it so the items in the table can be rearranged and their positions stored back into the MySQL server.
这是主页面（workshops.php）：
Here is the main page (workshops.php):
<?php
require_once("connection.php");
?>
<html>
<head>
<style type="text/css">
body { position: relative; }
#content { width: 742px; height: auto; position: relative; margin-left: auto; margin-right: auto; }
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var fixHelper = function(e,ui){
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
};
$("#sortable tbody.contenet").sortable({
helper: fixHelper,
stop: function(event, ui)
{alert("something changed");
//create an array with the new order
order = $.map($(this).find('input'), function(el){
for (j=0; j < $(el).length; j++){
return $(el).attr('id') + '=' + j;
}
});
var message = "";
for(i=0; i < order.length; i++){
message = message + order[i];
message = message + " ";
}
alert(message);
//sorder = order.serializeArray();
//alert(sorder);
$.ajax({
url: "updateworkshops.php",
type: "post",
data: order,
error: function (){
alert("theres an error with AJAX");
},
success: function(){
//alert("Saved.");
}
});
}
});
});
</script>
</head>
<body>
<div id="content">
<p>Click on "+ Create new workshop" to create a new workshop".</p>
<p>Click on the name of a workshop to add dates and times for when it is available and/or to make changes to it.</p>
<br />
<table>
<!--Create Workshop-->
<tr>
<td width="25%" bgcolor="6BF26B"><a href="create.php">+ Create new workshop</a></td>
</tr>
<tr><td bgcolor="FFFF00"><a href="settings.php">~ Edit settings</a></td>
</tr></table><br />
<form id="pickles" action="updateworkshops.php" method="post">
<table id="sortable"><tbody class="contenet">
<!--List Workshops-->
<?php
$query = "SELECT * FROM workshops ORDER BY position";
$result = mysql_query($query);
while ($row = mysql_fetch_assoc($result)) {
echo "<tr bgcolor='{$row['color']}'>"; echo "\r\n";
echo "<td><input type=\"hidden\" id=\"order_".$row['id']."\" name=\"order_".$row['id']."\" value=\"".$row['position']."\" /><label class=\"handle\">[X]</label></td>"; echo "\r\n";
echo "<td><a href='edit.php?workshop_id={$row['id']}'>{$row['name']}</a></td>"; echo "\r\n";
echo "<td>{$row['description']}</td>"; echo "\r\n";
echo "</tr>"; echo "\r\n";
}
?>
</tbody>
</table>
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</body>
</html>
<?php mysql_close(); ?>
这是updateworkshops.php页面，它将数据发布到：
And this is the updateworkshops.php page that it POST the data to:
<?php
require_once("connection.php");
if(isset($_POST['submit'])) {
while(list($key,$value) = each($_POST)){
if(substr($key,0,5) == "order_"){
$id = trim($key,'order_');
$sql = 'UPDATE workshops SET position = '.$value.' WHERE id = '.$id;
if(!mysql_query($sql)) {
echo "SOMETHING WENT WRONG";
}
}
}
}
mysql_close();
?>
当表格完成移动项目时，我做了它，所以它会警告新阵列它会发布到updateworkshops.php页面。当我这样做时，所有订单_＃都等于0并且这些值没有存储在数据库中。
When the table is done moving an item, I made it so it alerts the new array that it will POST to the updateworkshops.php page. When I do that, all the order_#'s are equal to 0 and those values are not stored in the database.
我觉得我错过了什么，但是在过去的几个小时里，我一直试图摆弄这段代码。也许我对Javascript不熟悉没有帮助...但我认为我有正确的想法。
I feel like I'm missing something, but I've been trying to fiddle with this code for the past couple hours. Maybe it doesn't help that I'm unfamiliar with Javascript... but I thought I have the right idea down.
推荐答案
尝试做这样的事情：
var sortable = $("#sortable tbody.contenet").sortable({
helper: fixHelper,
stop: function(event, ui) {
//create an array with the new order
order = $(this).find('input').map(function(index, obj) {
var input = $(obj);
input.val(index + 1);
return input.attr('id') + '=' + (index + 1);
});
$.ajax({
url: "updateworkshops.php",
type: "post",
data: order,
error: function() {
console.log("theres an error with AJAX");
},
success: function() {
console.log("Saved.");
}
});
}
});
您需要做的就是使用map循环遍历输入使用循环的索引作为顺序。此代码还更新了输入值以获得新的位置值。
All you need to do is use map to loop over the inputs use the index of the loop as the order. This code also updated the input value to have the new position value.
还有时间了解 firebug 或 webkit开发人员工具和< a href =http://getfirebug.com/logging =nofollow> console.log 而不是使用警报。警报不是调试工具。
Also its time to learn about firebug or webkit developer tools and console.log rather than using alert. Alert is not a debug tool.
这篇关于如何将JQuery UI可排序表位置保存到MySQL数据库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
