edit-in-place、より多くのdbフィールドを編集可能にする方法

Question

おはよう！

私はちょうど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;} 
} 

?> 

そして頭の中で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>") 

ありがとう！ :)

あなたは Jeditable jQueryプラグイン（ http://www.appelsiini.net/projects/jeditable）を使用して見たいと様々の良い例のためにあなたがデモページで見ることができます使用することがあり

Answer 1

：また http://www.appelsiini.net/projects/jeditable/default.html

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

そして、editableというクラスの要素は、htmlには表示されません。ちょうどeditBoxです。

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