Jquery Edit text then save to DB using ajax

Question

I have a page with text displayed in divs and spans. Next to each one I have an image that the user can click on.

When they click this image I need the text to change to a text area so the user can edit the text and then when they click of it it will need to call a php script to save to DB via ajax.

All divs and images have unique ID's so this should make it easier with the jquery selector.

Can anyone help? Everything I have tried so far is not really worked.

Thanks

Answer 1

You could make the div editable:

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

Your html structure would have to look like this

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

The saveEdits() function:

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

}

Answer 2

Let's say you have:

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

To do as your requirements suggest, an approach that would suffice is the below JS code.

<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>

You should put in mind how to name the divs and images ids so that accessing a div's id from the image id is easy. You should use your own protocol so that if you have the image ID, you can get the asssociated div id, OR you can put the image inside the div so that it's as easy as selecting the PARENT.

After editing you can then set it up for ajax after the user.

The code is does not fully cover every situation for example if you click another imagebefore saving your first opened textarea but I believe that it will set you to the right road on the approach you should take.

Answer 3

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