Question

我的应用程序所做的是，通过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();
?>

当表完成移动项目时，我做了它，因此它会提醒新数组它将POST到updateworkshops.php页面。当我这样做时，所有订单_＃都等于0，这些值不会存储在数据库中。

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

Answer 1

尝试做这样的事情：

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 developer tools和console.log而非使用提醒。警报不是调试工具。

如何将JQuery UI可排序表位置保存到MySQL数据库？

1 个答案: