Question

我的网站上有一些列，而theese列可以通过textarea进行编辑，如果要编辑的列有一些内容，那么旧的内容将被放入textarea。然后在保存按钮上将该文本区域的值存储到变量中，如果我警告此变量，它会提醒与旧内容相同的值。

这个想法就是这样的：FIDDLE

当textarea更新div时，当你点击save并在你点击编辑时获取div中的内容。这个简单的工作原理应该如此，但我正在使用我的代码，我无法找到错误。并且控制台中也没有错误。

我做的exmaple的差异和我的问题的地方是我使用ajax调用来获取旧内容。

首先是编辑点击时发生的事情：

$('body').on('click', '.edit_column', function() {      

    column_to_edit = $(this).parent().parent().attr('id');
    current_step = "edit";

    $.ajax({
            url: 'pageEditor_ajax.php',
            dataType: 'json',
            async: false,
            type: 'post',
            data: {
                item_id: column_to_edit,
                mode: "edit_item"   
            }, success:function(s) {
                element_type = s.type;
                old_content = s.content;
            }, error:function(e) {  
                alert('Error!');
            }
        });

    if(element_type == 'text') {
        $('.input_type').html('<textarea class="dialog_editor element_content"></textarea>');   
    }


    $('.element_content').val(old_content);

    $('.column_tool_dialog').css('display', 'block');
    $('#edit_column_dialog').css('display', 'block');
    $('#edit_column_dialog').animate({
        left: "-=300px",
        opacity: "1"
    },500);
});

首先，我找到了我要编辑的列的ID，所以我很谨慎，我正在编辑数据库中的右列。

current_step变量仅适用于外观，有一些不同的对话框。

我使我的ajax调用成功返回。

然后我有一个if语句来检查它是什么类型的列，我有3种类型，另外两个是图像和标题，但它们还没有开始，因为它还没有工作。

if语句应该只构建需要编辑该类型列的输入。

在输入字段构建之后，它将old_content放入textarea，这也可以正常工作。最后几行仅用于为下一个对话框设置动画效果。所以我的编辑步骤（我认为）。

然后你看到textarea，我有旧的内容。单击“保存”按钮时，会发生以下情况：

$('#element_edit_button').click(function(e) {   

    e.preventDefault();

    new_content = $('.element_content').val();

    alert(new_content);

    $.ajax({
            url: 'pageEditor_ajax.php',
            dataType: 'json',
            async: false,
            type: 'post',           
            data: {
                item_id: column_to_edit,
                item_content: new_content,
                col_type: element_type,
                mode: "save_item",
                item_attr_alt_tag: alt_tag,
                item_attr_title_tag: title_tag  
            }, success:function(s) {
            }, error:function(e) {  
                alert('Der skete en fejl!');
            }
    });


    $('li#'+column_id+' .preview_content').html(new_content);
    $('li#'+column_id+' > div > small').html(new_content);
});

在这个步骤中，我有很多东西只是为了看起来，所以我这次排除了他们。但是这里解释的问题相当简单，new_content变量与old_content一致吗？所以所有使用new_content的地方都没有更新。

修改这是html所有发生的地方：

<div id=\"edit_column_dialog\" class=\"column_tool_dialog_box\">
                    <div class=\"close\">x</div>
                        <h3>Rediger dit element</h3>
                        <form method=\"post\" id=\"save_element\">
                            <p class=\"error_message\"></p>
                            <div class=\"input_type\"></div>
                            <input id=\"element_edit_button\" class=\"green dialog_button\" type=\"submit\" value=\"Gem element\" />
                        </form>
                    </div>
                </div>

对不起，很长的帖子，希望有人有一个太棒了。

Answer 1

正如其他人所说，你的jquery甚至html都可以使用一些清理工具。话虽如此，假设我正确理解了您的问题，我认为您只是在#element_edit_button点击事件中错过了一行：

$('.element_content').val(new_content);

这应该可以解决问题。

jquery textarea不会更新其值

1 个答案: