php - Jquery编辑文本然后使用ajax保存到数据库

Question

我有一个页面，其中的文本显示在 div 和 span 中。在每一个旁边，我都有一个用户可以点击的图像。

当他们单击此图像时，我需要将文本更改为文本区域，以便用户可以编辑文本，然后当他们单击它时，将需要调用 php 脚本以通过 ajax 保存到 DB。

所有 div 和图像都有唯一的 ID，所以这应该使 jquery 选择器更容易。

任何人都可以帮忙吗？到目前为止，我尝试过的一切都没有真正奏效。

谢谢

Answer 1

假设您有：

<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，就可以获得关联的 div id，或者您可以将图像放在 div 中，这样就像选择 PARENT 一样容易。

编辑后，您可以在用户之后为 ajax 设置它。

该代码并未完全涵盖所有情况，例如，如果您在保存第一个打开的文本区域之前单击另一个图像，但我相信它会让您走上正确的道路，您应该采取的方法。

Answer 2

最后，我使用 jeditable 插件为找到这篇文章的任何人解决了这个问题

Answer 3

您可以使 div 可编辑：

$(".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
        }
    })

}