jquery編輯文本，然後使用ajax保存到數據庫

Question

我有一個頁面，文本以div和span顯示。在每一個旁邊都有一個用戶可以點擊的圖像。

當他們點擊這個圖片我需要的文字更改爲一個文本區域，以便用戶可以編輯文本，然後當他們點擊它，它需要調用一個PHP腳本通過AJAX保存到數據庫中。

所有的div和圖像都有唯一的ID，所以這應該使jquery選擇器更容易。

任何人都可以幫忙嗎？我到目前爲止所嘗試的所有東西都沒有真正奏效。

感謝

Answer 1

我用jeditable插件到底要解決這一個任何人發現這個帖子

Answer 2

你可以做的股利編輯：

$(".ajax-div .on-img").on("click",function(ev) { 
    $(this).parent().find(".editable-text").attr("contenteditable", "true").after("<button onclick='saveEdits()'>Save</button>"); 
}) 

你的HTML結構將不得不像這樣

<div class="ajax-div" id="somediv"> 
<div class="editable-text">Editable text</div> 
<img class="on-img" src="" alt=""> 
</div> 

的saveEdits（）函數：

function saveEdits() { 
    $(".ajax-div").each(function() { 
     if(this.hasAttr("contenteditable") && this.attr("contenteditable")==true) { 
      id = $(this).attr("id"); 
      //handle change 
     } 
    }) 

}

Answer 3

比方說，你有：

<div id='mydivparent'> 
Some text here 
    <div> 
      <img src='images/mypic.jpg' id='mydiv' onclick='editr(this)' /> 
    </div> 
</div> 

要做到爲您的需求建議，這就夠了是下面的JS代碼的方法。

<script> 

    function editr(obj) 
      { 
       var id = $(obj).attr('id'); 
       var text = $('#mydiv'+parent).text(); 
       $('#mydiv'+parent).empty(); 
       $('#mydiv'+parent).append('<form action='form_processor.php' onsubmit="send_ajax($('textarea#'+id+').value)"><textarea id='+id+'>'+text+'</textarea><input type='submit' value='Save Text'></form>'); 

      } 
    function send_ajax(txtValue){ 

       $.ajax({ 
         url: 'form_processor', 
         cache: false; 
         type: 'POST', 
         data: {'text': txtValue}, 
         success: function(){ 
          //Code to add the text to the div and delete the textarea returning it to a normal div 
         } 


       }); 
       return false;      

      } 

</script> 

您應該牢記如何命名div和圖像id，以便從圖像ID訪問div的id很容易。你應該使用自己的協議，這樣如果你有圖像ID，你可以得到asssociated div id，或者你可以把圖像放在div中，這樣就像選擇PARENT一樣簡單。

編輯之後，您可以在用戶之後將其設置爲ajax。

如果您在保存第一個打開的textarea之前單擊另一個圖像，則代碼不會完全覆蓋所有情況，但我相信它會爲您設置適合您的方法。