D4mations.com

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

d4mer

, , , , , , , , , , , , , , , , , ,

27 responses to “In Place Editing CMS Development HTML JavaScript Tutorial”

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

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

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

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

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