In Place Editing CMS Development HTML JavaScript Tutorial

Lesson Code:
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.


34 thoughts on “In Place Editing CMS Development HTML JavaScript Tutorial”

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

    function makeEditable(div){ = "1px solid #000"; = "20px";
    div.contentEditable = true;
    function makeReadOnly(div){ = "none"; = "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

  2. 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();});

  3. 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.";

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

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

  6. 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…

  7. Adam, you are awesome. I am watching your video since past 1 year, i have seen all of your videos. I refer for videos for my college project and it is helping us in a great way. Thank you so much Adam. You are a guru to me.

  8. Thank you very much, Adam! Love your tuts. They are very thorougly detailed and explained! In fact, the most informative I've ever met across youtube. Great job! Keep it up!

  9. Adam, since 2014 I'm watching your videos and I learn so much ! Now I'm watching your videos because I like them, thanks to you I have discovered how to use Ajax year ago, thanks to ajax I'm working with Node.js and since 2015 I'm a real developer with few customers. Do your awesome job, help people.
    Cheers from Holland.

Leave a Reply

Your email address will not be published. Required fields are marked *