JQuery редактировать на месте - обновлять / предварительно заполнять поле каждый раз, когда содержимое было отредактировано

Question

Я использую jQuery Jeditable (потрясающий скрипт между прочим) для создания формы редактирования на месте. Итак, поверх формы я загружаю скрипт. Затем форма состоит из нескольких скрытых полей, которые предварительно заполняются текстом соответствующих тегов

.

С помощью вас, ребята, это пример того, как поле предварительно заполнено:

Текст со страницы редактирования на месте:

<p class="autogrow" style="width: 300px" id="title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Javascript-скрипт, который делает бизнес:

<script type="text/javascript" charset="utf-8">
$(function() {
  $("#input_3_2").val($("#title").text());
});
</script> 

Проблема, которая у меня есть, состоит в том, что в данный момент поле с идентификатором 'input_3_2' предварительно заполняется текстом из абзаца с идентификатором 'title' при загрузке страницы.

Можно ли заново заполнять / или заново заполнять поле при каждом изменении абзаца?

Answer 1

Если p имеет атрибут contenteditable="true", вы можете подписаться на его событие keyup.

Например, если это ваш html

<p id="TargetP" contenteditable="true">
    Some text
</p>
<input type="hidden" id="TargetHidden"/>

<!-- This anchor is just for the purpose of the demonstration -->
<a href="javascript:;" id="ShowContent">Show hidden's value</a>

, этот скрипт сделает всю работу

$(function() {
    // declare the function that will take value from p 
    // and put it into the hidden
    function updateHidden() {
        $("#TargetHidden").val($("#TargetP").text());
    }

    // Call it for the first time to update the hidden
    updateHidden();

    // assign it each time the key is released when the p is being
    // edited
    $("#TargetP").keyup(updateHidden);

    // just a dummy action to show the content of the hidden at the
    // given time
    $("#ShowContent").click(function() {
        alert($("#TargetHidden").val());
    });
});​

Вот рабочая демонстрация

Однако я бы предпочел onsubmit событие form, если оно, конечно, синхронно.

<!-- onsubmit="return false" is placed to prevent the form from being
     submitted remove it in production. -->
<form id="TargetForm" onsubmit="return false;">
    <p id="TargetP" contenteditable="true">
        Some text
    </p>
    <input type="hidden" id="TargetHidden"/>
    <input type="submit" value="Submit me" />

    <!-- Demo's helper link -->
    <a href="javascript:;" id="ShowContent">Show content</a>
</form>​

И скрипт

// declare the function that will take value from p 
// and put it into the hidden
function updateHidden() {
    $("#TargetHidden").val($("#TargetP").text());
}

$(function() {
    // Call it for the first time to update the hidden
    updateHidden();

    // subscribe to the submit event of your form
    $("#TargetForm").submit(function() {
        updateHidden();
    });

    // dummy function for demo purposes
    $("#ShowContent").click(function() {
        alert($("#TargetHidden").val());
    });
});​

И рабочая демоверсия

PS Если у вас есть какие-либо другие условия.Прокомментируйте, и я сделаю обновления.

Answer 2

Использовать обратный вызов

$("#title").editable('http://www.example.com/save.php', { 
    type     : 'textarea',
    submit   : 'OK',
    callback : function(value, settings) {
        $("#input_3_2").val( value );     
    }
});

Answer 3

Вам необходимо пройти DOM для каждого текстового поля и соответствующие теги p.Поэтому я говорю, что обход зависит от используемой вами структуры HTML.Здесь я думаю, что вы можете разместить свои текстовые поля непосредственно перед соответствующими p тегами.И вы можете пройти DOM с чем-то вроде -

   $("input:text").each(function(){
           $(this).val($(this).next('p').text());
   });