如何恢复Bootstrap3模式实现的编辑表单上的数据

时间:2014-06-13 11:45:57

标签: javascript jquery html css twitter-bootstrap

我正在开发一个项目,该项目使用bootstrap3来实现包含编辑形式的模态。我可以通过设置value属性来显示模态并将原始数据加载到每个输入字段中。问题是当我进行一些更改并单击关闭按钮取消它。然后再次加载此编辑表单并查看内容是上次编辑的内容而不是原始内容。单击“关闭”按钮,我不知道如何恢复它。此外,用户输入在哪里以模态存储? 以下是我的代码

<div class="span4">
            <div class="panel panel-primary">
                <div class="panel-heading">qawsedrftgDI</div>
                <div class="panel-body">jhyuh</div>
            </div>
            <p>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editItem2">Edit</button>
                <input type="button" class="btn btn-default" value="Delete" onclick="javascript:deleteCategoryNoneItem(2);" />
            </p>
            <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="editItem2">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">Make Your Change</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" method="POST" id="existingItem2">
                                <div class="form-group">
                                    <label class="control-label col-md-2">Title</label>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" value="qawsedrftgDI" id="title2" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-2">Content</label>
                                    <div class="col-md-8">
                                        <textarea rows="10" class="form-control" id="content2">jhyuh</textarea>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" id="changeExistingItem" onclick="javascript:modifyCategoryNoneItem(2);">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

1 个答案:

答案 0 :(得分:3)

请参阅Bootstrap modals的文档。在事件部分中,您可以使用&#34; hidden.bs.modal&#34;模态关闭后做一些事情的事件。所以它看起来像:

$('#myModal').on('hidden.bs.modal', function (e) {
  $(this).find('input').val('');
});

从这里你可以指定&#34;占位符&#34;输入字段上的属性,或者在事件处理程序中执行一些javascript。