我的应用程序所做的是通过MySQL将项目列表加载到表中。
我可以很好地加载表,但我需要这样做,以便表中的项目可以重新排列,并且它们的位置存储回MySQL服务器。
这是主页(研讨会.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(); ?>
这是更新研讨会.php页面,它将数据发布到:
<?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();
?>
当表完成移动项目时,我这样做是为了提醒新数组它将 POST 到 updateworkshop.php 页面。 当我这样做时,所有 order_# 都等于 0,并且这些值不会存储在数据库中。
我觉得我错过了一些东西,但在过去的几个小时里我一直在尝试摆弄这段代码。 也许我不熟悉Javascript也无济于事...但我认为我的想法是正确的。
尝试做这样的事情:
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 来循环输入,使用循环的索引作为顺序。 此代码还更新了输入值以具有新的位置值。
也是时候了解Firebug或webkit开发人员工具和控制台了.log而不是使用alert。警报不是调试工具。