就地編輯，如何讓更多的分區可編輯

Question

晚上好！

我剛剛設法用jQuery和AJAX植入了一個非常有用的編輯就地功能。我可以編輯1分貝字段。我想能夠編輯多個數據庫字段。 這些都是腳本：

更新查詢（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, "&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文件中，並重命名數據庫字段，併爲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。

最後，每次需要更改時都提交所有元素？這是非常低效的，因爲就地編輯的一個優點是每次只發送很小的更改。