Используйте jQuery для создания редактирования на месте div и получите новый div для редактирования прямо под ним - PullRequest
Новая
       11

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

2 голосов
/ 09 марта 2010

Я новичок в 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);
            }
        });
    });

Ответы [ 2 ]

5 голосов
/ 09 марта 2010

Используйте 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-адрес, который вы хотите сохранить, в качестве первого параметра и настройки в качестве второго.

0 голосов
/ 28 января 2013

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

...