1

我的应用程序所做的是，通过 MySQL 将项目列表加载到表中。

我可以很好地加载表，但我需要这样做，以便可以重新排列表中的项目并将它们的位置存储回 MySQL 服务器。

这是主页（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 页面：

<?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 页面。当我这样做时，所有 order_# 都等于 0，并且这些值不会存储在数据库中。

我觉得我错过了一些东西，但在过去的几个小时里，我一直在尝试修改这段代码。也许我不熟悉Javascript并没有帮助......但我认为我有正确的想法。

4

1 回答 1

2

尝试做这样的事情：

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 开发者工具和console.log而不是使用警报的时候了。警报不是调试工具。

于 2012-05-17T19:17:33.120 回答