我有一个标签式的html表单.在从一个选项卡导航到另一个选项卡时,即使数据没有更改,当前选项卡的数据也会保留(在数据库上).
我想仅在编辑表单时才进行持久性调用.表单可以包含任何类型的控件.弄乱表单不需要输入一些文本,但在日历控件中选择日期也符合条件.
实现此目的的一种方法是默认情况下以只读模式显示表单并使用"编辑"按钮,如果用户单击编辑按钮,则会调用DB(再次,无论数据是否被修改)这是对现有技术的改进.
我想知道如何编写一个通用的javascript函数来检查是否有任何控件值被修改？
我有以下问题:
我有一个HTML文本框(<input type="text">),其内容由我无法触摸的脚本修改(这是我的页面,但我正在使用外部组件).
我希望每次文本框的值发生变化时都会在我的脚本中收到通知,所以我可以对它做出反应.
我试过这个:
txtStartDate.observe('change', function() { alert('change' + txtStartDate.value) });
哪(可预见)不起作用.它只会在我自己用键盘更改文本框值然后将焦点移动到其他位置时执行,但如果脚本更改了值,则不会执行它.
还有我可以听的另一个事件,我不知道吗？
我正在使用Prototype库,如果它是相关的,修改文本框值的外部组件是Basic Date Picker(www.basicdatepicker.com)
我在测试表单上使用脏表单/你确定js,确认用户是否确实想要离开未保存更改的页面.
这按预期工作,但我也使用"请等待"图像,显示用户何时调用服务器.
如何只触发"请稍候"的形象,只有当用户点击"离开此页"按钮上的ARE-你,肯定消息弹出框？
目前,当用户点击取消按钮时,我已触发请等待图像,b/c我无法想到还有什么地方可以触发它.
这是我的<head>代码:
<div id="loading-div-background">
<div id="loading-div" >
<img src="{{ STATIC_URL }}img/page-loader.gif" />
</div>
</div>
这是我的模板代码:
<a href="{% url certification_details %}" class="btn" onclick="showProgressAnimation();">Cancel</a>
这是我的js代码:
<script>
$('form').areYouSure( {'message':'You have unsaved changes.'} );
</script>
编辑 - 根据要求添加了隐藏图像css.
这是第一次加载页面时隐藏了请等待图标的CSS:
#loading-div-background {
background-color: rgba(246,246,246,0.7);
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}