Good day. Can you please tell me how to edit the text directly on the page? For example, there is a text taken from the database, press the button to edit the text is replaced by <textarea>этот же текст из базы</textarea> . The user makes changes, clicks the save button and the text is updated. How to implement this?

    3 answers 3

    Somewhere I already wrote it, but oh well.

     <div id="pagecontent">text</div> <div id="pagecontrols"> <img src="img/i.gif" alt="" class="icon3edit pageedit" /> </div> <script type="text/javascript"> $('.pageedit').toggle(function(){ var c = $('#pagecontent'); c.html('<textarea id="pageeditor" cols="80" rows="10">'+c.html()+'</textarea>'); $(this).toggleClass('icon3edit icon3ok'); }, function(){ $.post(__ADRESS__, {'text': $('#pageeditor').val()}, function(data){ $('#pagecontent').html(data); }); $(this).toggleClass('icon3edit icon3ok'); }); </script>

    JQuery is used, the message is sent to __ADRESS__ . Well, and there is a decoration in the form of an icon.

    • The content of #pageeditor is recorded in the database, but skipping the moment of editing. And if you do not specify the path, the textarea appears normally. How to fix it? - Idaho37
    • Perhaps your script does not update the text in the database or discards your changes. Check it out. - ling
    • This line is not clear, "c.html('<textarea id="pageeditor" cols="80" rows="10">'+c.html()+'</textarea>');" it turns out that c.html() already contains "<textarea id="pageeditor" cols="80" rows="10"> текст в диве #pagecontent" . It is recorded with the open textarea tag. And if the field is put into a separate div (do not replace #pagecontent ), then the problem disappears, but .val() does not work. I do not know what to do anymore. - Idaho37
    • When clicking on .pageedit then one or another function is triggered. The first one casts the innerHTML #pagecontent into the textarea, and the second one sends the data and changes the innerHTML to the server's response (for good, it should be the sent code). If your code turns around twice in textarea, it means that no response was received from the server. - ling
    • Thank you, figured out. - Idaho37

    google info about editable

      As soon as the text is changed, the user applies the changes by pressing the button, by pressing you replace the text in the database (if you could pull out something and write it down, yes), so that everything works beautifully it would be nice to use ajax for this. Implement it first, then read about ajax.