Используйте jQuery, чтобы создать редактирование на месте div и иметь новый div, доступный для редактирования прямо под ним.

Я новичок в jQuery и хотел бы знать, можно ли создавать и редактировать div на месте, на который я могу щелкнуть, ввести какой-нибудь текст, сохранить его, и сразу же под ним динамически появится другой div, который позволит вводить и сохранять те же возможности, и так далее, и тому подобное. Если у кого-то есть идеи, мы будем очень признательны.

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

javascript html jquery edit-in-place
person J.B.    schedule 09.03.2010    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Используйте jEditable для редактирования на месте и используйте его функции обратного вызова для создания новых div ниже существующего.

На самом деле вы не используете все, что может предложить jEditable, попробуйте что-то вроде этого (я не могу проверить это прямо сейчас, но это должно дать вам некоторые идеи):

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

Это должно быть все, что нужно. Вам не нужно делать отправку самостоятельно, для этого и предназначен jEditable. Просто укажите URL-адрес, который вы хотите сохранить, в качестве первого параметра и настройки в качестве второго.

person Tatu Ulmanen    schedule 09.03.2010
comment
может быть у вас есть пример кода? пожалуйста, посмотрите, что у меня есть выше. - person J.B.; 09.03.2010

arrow_upward
0
arrow_downward

На самом деле я начал с использования jEditable и вместо этого перешел к плагину tectual editables() Вот код, который я использую https://github.com/relipse/jQuery-Editable/blob/master/jquery.editable.js

person relipse    schedule 28.01.2013