In Place Editing CMS Development HTML JavaScript Tutorial



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

27 thoughts on “In Place Editing CMS Development HTML JavaScript Tutorial

  • May 7, 2019 at 05:36
    Permalink

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

  • May 7, 2019 at 05:36
    Permalink

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

    <script>
    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.");
    }
    </script>

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

  • May 7, 2019 at 05:36
    Permalink

    Hi Please can you help me ?

    i want call page id like
    http://www.domen.com/page?id=1

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

  • May 7, 2019 at 05:36
    Permalink

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

  • May 7, 2019 at 05:36
    Permalink

    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?

  • May 7, 2019 at 05:36
    Permalink

    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?

  • May 7, 2019 at 05:36
    Permalink

    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.";
    }
    }
    }
    ajax.send("eln="+eln);
    }

  • May 7, 2019 at 05:36
    Permalink

    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.

  • May 7, 2019 at 05:36
    Permalink

    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

  • May 7, 2019 at 05:36
    Permalink

    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…
    </div>

Leave a Reply