• Wednesday , 3 June 2020

In Place Editing CMS Development HTML JavaScript Tutorial

Code Canyon

Lesson Code: http://www.developphp.com/video/JavaScript/In-Place-Editing-CMS-Development-HTML-JavaScript-Tutorial
Learn the logic behind building in-place content editing systems. We allow the user to edit content directly on the front-end where it displays. A good scenario to use this is granting a privileged user the right to edit some content in-place, save it to database when they finish editing, and restore the content container to its normal state.

Original source

3d Ocean

Related Posts


  1. Fraggle
    May 7, 2019 at 05:36

    Not clear how it just adds the new text to the database, sorry im new to javascript lol

  2. Shaikh Khaja Peer
    May 7, 2019 at 05:36

    Very simple and very usefull video bro… thanks

  3. Weird Awesome
    May 7, 2019 at 05:36

    But how to read data from this div? When i use innerHTML, I'm getting html elements also. But when i use innertext and displaying it somewhere I'm getting symbol like question mark in between the words. Can some one help me please ..

  4. Jesse Reyes
    May 7, 2019 at 05:36

    For those of you wanting to click only once and have the cursor placed on the text, do this.

    function makeEditable(div){
    div.style.border = "1px solid #000";
    div.style.padding = "20px";
    div.contentEditable = true;
    function makeReadOnly(div){
    div.style.border = "none";
    div.style.padding = "0px";
    //alert("Run Ajax POST request here to save the div.innerHTML
    //or div.textContent to the database.");

    <div contentEditable="true" onclick="makeEditable(this)" onblur="makeReadOnly(this)">
    Stuff to edit

  5. Gortex Wrecker
    May 7, 2019 at 05:36

    thx, this is very helpfull. Needed this for a client who wants to edit text without messing around in the code

  6. Matheus Macias
    May 7, 2019 at 05:36

    melhor canal xD

  7. Yj Kayal
    May 7, 2019 at 05:36

    Hi Please can you help me ?

    i want call page id like

    how to send id on slider.php page
    mysql_query need id
    mysql_query ("SELECT * FROM clubdetails WHERE clubs_id='$id' and showdata='Clubs_Slider' ORDER BY `clubdetails`.`id` DESC");

    my js :
    $(document).ready(function(){function showslider(){$.ajax({type:"POST",url:"slider.php",data:{action:"showslider"},success:function(data){$(".slider").html(data);}});} showslider();});

  8. Stk Media
    May 7, 2019 at 05:36

    I have implemented this on my website allowing users to edit 4 fields, I should make enumerated values editable too someday.

  9. Andris Pliņģis
    May 7, 2019 at 05:36

    Thank You Adam!

  10. enqvist ko
    May 7, 2019 at 05:36

    Hi, I have this big project due in a day and I am still not sure how to make it so the only the user can edit it, can you please show me the full method of how?

  11. Charbel Sarkis
    May 7, 2019 at 05:36

    adding php is very easier with extra buttons

  12. Henning Larsen
    May 7, 2019 at 05:36

    Hi Adam, thanks for yet another great tutorial!
    Could you extend this lesson by showing me/us how to get the database part up and running with this code?

  13. Henry Gabriel González Montejo
    May 7, 2019 at 05:36

    Thanks.. clear and easy of understand, i like this method over plugins… for firefox i have to use $(div).attr('contenteditable','true');

  14. wolfgang germain
    May 7, 2019 at 05:36

    Adam, you've got great tutorial. Thank you.

  15. Eelke Johnson
    May 7, 2019 at 05:36

    I was searching for this videos for an hour! TY

  16. Mark Waters
    May 7, 2019 at 05:36

    This is awesome Adam. Definitely going to use this!

  17. Stephan Stanisic
    May 7, 2019 at 05:36

    I line the TinyMCE inline edit function to do this. It gives a powerful WYSIWYG editor that is inline like this.

  18. modernator
    May 7, 2019 at 05:36

    always thanks for good tutorials 😉 i am your big fan.

  19. Moamar Ghazally
    May 7, 2019 at 05:36

    awesome tutorial, simple and clear
    thanks Adam

  20. Stk Media
    May 7, 2019 at 05:36

    Could I get an assist with the rest of the ajax, this is what I have:

    var eln = div.innerHTML;
    if(eln == "" || eln.value.length < 10){
    _("status").innerHTML = "Input more than that";
    } else {
    var ajax = ajaxObj("POST", "indpost.php");
    ajax.onreadystatechange = function() {
    if(ajaxReturn(ajax) == true) {
    if(ajax.responseText == "data_small"){
    _("status").innerHTML = "Please type at least 10 characters.";
    } else if(ajax.responseText == "account_no_exist"){
    _("status").innerHTML = "Account doesn't exist.";
    } else if(ajax.responseText == "post_ok") {
    _("status").innerHTML = "Post updated.";
    } else {
    _("status").innerHTML = "Error occured.";

  21. Camilla Johannesen
    May 7, 2019 at 05:36

    Super promising…Since drag and drop builders are all the rage these days, you might want to show how easy it is to build our own in javascript, unless it's not easy at all and I'm just deluding myself.

  22. Webnguitars adf
    May 7, 2019 at 05:36

    I have no words to describe your work man…I am learning web for around two months and got easily discouraged by the books and exhausting explanations/tutorials/books, but this opens a whole new dimension. Thanks dude

  23. Peter M. Souza Jr.
    May 7, 2019 at 05:36

    i love you, no homo, but.. homo… but, no homo

  24. Santiago Orihuela
    May 7, 2019 at 05:36

    When clicking on the div blur doesn't works properly unless you click again, I think having the contenteditable directly on the div makes it work better.
    <div contentEditable="true" onclick="makeEditable(this)" onblur="makeReadOnly(this)">
    div containing content to be managed by the user…

  25. Angelo Weiss
    May 7, 2019 at 05:36

    another awesome video! thanks man! cheers from Brazil!

  26. Shaunak Sen
    May 7, 2019 at 05:36

    wow.. amazing tutorial. ur tutorials are really great and come in real handy in real life projects. Thanks!

  27. Ali Arman Daulay
    May 7, 2019 at 05:36

    What can you make a div like pattern bookcase that have the column , row , and rack ?

Leave A Comment

You must be logged in to post a comment.