場所の編集、より多くのDBフィールドを編集可能にする方法

おはようございます!

私はちょうどjQueryとAJAXを使って、本当に甘い働きのedit-in-place関数を移植することができました。私は1 dbフィールドを編集することができます。私は複数の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;}
} 

?>

頭の中のアヤックス

<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, """);
                $(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>Save Cancel")
                        .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>Save Cancel")

手伝ってくれてありがとう! :)

0
あなたはjQueryでこれを行う必要がありますか?それとも基本的なjavascriptでこれを行うことができますか?あなたのツールが難しくなっている場合、これはオプションであれば、javascriptだけで簡単に問題になります。
追加された 著者 James Black,
こんにちは、あなたの返信ありがとう:)本当にうまく動作するので、私は本当にこのjQueryスクリプトを使用することを好む。私は同じスクリプトで編集可能なフィールドを増やす方法がなければならないことを知っています。
追加された 著者 Maarten Hartman,

1 答え

You may want to look at using the Jeditable jQuery plugin (http://www.appelsiini.net/projects/jeditable) and for a good example of various uses you can look at the demo page: http://www.appelsiini.net/projects/jeditable/default.html

また、SQLインジェクション攻撃の影響を受けやすいデータベースを更新するために実際にPHPスクリプトを使用するつもりはないと思いますので、悪い習慣です。

そして、 editBox のHTMLでは、 editable クラスの要素は表示されません。

そして最後に、変更があるたびにすべての要素を提出していますか?インプレース編集のメリットの1つは、毎回小さな変更を送信することです。これは非常に非効率的です。

1
追加された
@MaartenHartman - _POSTとは関係ありませんが、データベースクエリで直接データを使用しています。問題に関する記事は次のとおりです。 adamsinfo.com/&hellip ; ここにはチュートリアルが1つあります: forum.codecall.net/php-tutorials/…
追加された 著者 James Black,
こんにちはジェームズ、広範な答えに感謝します。私はJeditableをもう一度試してみよう。それを前もって植え付けようとしたが、私は初心者であるので、まだ少し混乱している。セキュリティの部分については、素晴らしいチュートリアルを教えてください。 _POSTの権利とは何か関係がありますか?もう一度お時間をいただきありがとうございます。
追加された 著者 Maarten Hartman,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript