Question

晚上好人！

我刚刚设法用jQuery和AJAX植入了一个非常好用的编辑就地功能。我可以编辑1个db字段。我希望能够编辑多个数据库字段。这些都是脚本：

更新查询（handler.php）

  <?php
 include('../../core/additional/connect-db.php');

if (isset($_POST['id']) && isset($_POST['firstname'])) {
    $firstname = mysql_real_escape_string($_POST['firstname']);
    $id = mysql_real_escape_string($_POST['id']);

    $query = "UPDATE players SET firstname ='$firstname' WHERE id='$id'";   
    $result = mysql_query($query) or die ('Query couldn\'t be executed');
    if ($result) {echo 1;}
} 

?>

头上的ajax

<script type="text/javascript"> 

    $(document).ready(function() 
    {
        $(".editable").hover(
            function()
            {
                $(this).addClass("editHover");
            }, 
            function()
            {
                $(this).removeClass("editHover");
            }
        );

        $(".editable").bind("dblclick", replaceHTML);
        $(".btnSave, .btnDiscard").live("click", handler);

        UI("Ready");

        function UI(state)
        {
            var status = {};
            status.Ready = "Ready";
            status.Post = "Saving your data. Please wait...";
            status.Success = "Success! Your edits have been saved.";
            status.Failure = "Attempts to save data failed. Please retry.";

            var background = {};
            background.Ready = "#E8F3FF";
            background.Post = "#FAD054";
            background.Success = "#B6FF6C";
            background.Failure = "#FF5353";

            $("#status").animate({opacity: 0}, 200, function (){$("#status").html(status[state]).css({background: background[state]}).animate({opacity: 1}, 200)});
        }

        function handler()
            {
                var selector="";
                var code="21";
                if ($(this).hasClass("btnSave"))
                    {
                        UI("Post");
                        var str = $(this).siblings("form").serialize();
                        $.ajax({
                                type: "POST",
                                async: false,
                                timeout: 100,
                                url: "core/actions/handler.php",
                                data: str,
                                success: function(msg){code = msg; $(".message_edit").show(); $(".message_edit").fadeOut(2500);},                   
                        }); 
                        if(code == 1)
                        {
                            UI("Success");
                            selector = "editBox";
                        }
                        else
                        {
                            UI("Failure");
                            selector = "buffer";
                        }
                    }
                else {selector = "buffer"}

                $(this).parent()
                       .html($(this).siblings("form")
                                    .children("."+selector)
                                    .val())
                       .removeClass("noPad editHover")                     
                       .bind("dblclick", replaceHTML);

                return false;
            } 

        function replaceHTML()
            {
                var buffer = $(this).html()
                                    .replace(/"/g, "&quot;");
                $(this).addClass("noPad")
                        .html("")
                        .html("<form class=\"editor\"><input type=\"text\" name=\"firstname\" class=\"editBox\" value=\"" + buffer + "\" /> <input type=\"hidden\" name=\"buffer\" class=\"buffer\" value=\"" + buffer + "\" /><input type=\"hidden\" name=\"id\" class=\"record\" value=\"" + $(this).attr("id") + "\" /></form><a href=\"#\" class=\"btnSave\">Save</a> <a href=\"#\" class=\"btnDiscard\">Cancel</a>")
                        .unbind('dblclick', replaceHTML);       
            }

    }
    ); 

    </script>

然后使用以下字段显示和编辑该字段：

<td class="editable" id="' .($id). '" width="180">' .($task). ' </td>

我或许可以复制和重命名所有脚本，但我很肯定这不是理想的做法。我试图在handler.php文件中复制脚本并重命名db字段，并对ajax脚本执行相同的操作。但它没有用。我希望你的“问题”对你很清楚，有什么建议吗？

注意：我认为解决方案位于此行的某个位置（ajax脚本的底部）：

.html("<form class=\"editor\"><input type=\"text\" name=\"firstname\" class=\"editBox\" value=\"" + buffer + "\" /> <input type=\"hidden\" name=\"buffer\" class=\"buffer\" value=\"" + buffer + "\" /><input type=\"hidden\" name=\"id\" class=\"record\" value=\"" + $(this).attr("id") + "\" /></form><a href=\"#\" class=\"btnSave\">Save</a> <a href=\"#\" class=\"btnDiscard\">Cancel</a>")

提前感谢您的帮助！：）

Answer 1

您可能希望查看使用Jeditable jQuery插件（http://www.appelsiini.net/projects/jeditable），有关各种用途的好例子，您可以查看演示页面： http://www.appelsiini.net/projects/jeditable/default.html

另外，我希望你实际上不会使用那个php脚本来更新数据库，因为它容易受到SQL注入攻击，所以这是不好的做法。

我在html中看不到任何带有editable课程的元素，只有editBox。

最后，每次要进行更改时，您都要提交所有元素吗？这是非常低效的，因为就地编辑的一个优点是每次只发送少量更改。

编辑就地，如何使更多的数据库字段可编辑

1 个答案: