Question

I’m new to jQuery and would like to know if it is possible to create and edit-in-place div that I can click on, type some text, have it save and immediately have another div dynamically pop up beneath it that will allow the same capability to type in and save, so on and so forth. If anyone has any ideas it would be greatly appreciated.

    $(document).ready(function() {
        $('.edit_area').editable(function(value, settings) {
            return (value);
        }, {
            type: 'textarea',
            onblur: 'submit',
            indicator: 'Saving...',
            callback: function(value, settings) {
                var thisData = $(value);

                $.post('<%=Url.Action("SetPostieNotes", "Posties") %>',
                'postieNotes=' + escape(thisData)
                );
                var divTag = document.createElement("div");
                divTag.id = "div";
                divTag.setAttribute("align", "center");
                divTag.className = "edit_area";
                divTag.innerHTML = "Test Dynamic Div.";
                document.body.appendChild(divTag);
            }
        });
    });

Answer 1

Use jEditable for the edit-in-place functionality, and use it’s callback functions to spawn the new div below the existing one.

---

You’re not really using all that jEditable has to offer, try something like this (I am unable to test this right now but it should give you some ideas):

$(function() {
    $('.edit_area').editable('<%=Url.Action("SetPostieNotes", "Posties") %>', {
        callback: function(v, settings) {
            var new_div = $('<div />')
                          .addClass('edit_area')
                          .editable('<%=Url.Action("SetPostieNotes", "Posties") %>', settings);

            $(this).after(new_div);
        }
    });
});

That should be all there is to it. You don’t need to do the submitting yourself, that’s what jEditable is for. Just supply the URL you wish to save to as the first parameter, and settings as the second.