如何让BootStrap-DatePicker停止提交表单

Question

我对 bootstrap 日期选择器有疑问。我一直在努力寻找解决方案，但不幸的是我找不到解决方案。

问题描述 Bootstrap Datepicker 无需调用 Web 应用程序服务器。或者我可以这样说而不要求它这样做。

我的表格

<form class="fill" action="<% testbeanHandle.dummy(); %>"  id="inputForm">
<label class="control-label" >Date:</label>
<input value="2015-01-14" type="text" name="pickedDate" style="width: 160px;" id="datepicker"/>
</form>

我的图书馆

css/bootstrap.min.css
js/jquery-2.1.3.min.js
js/bootstrap.min.js
css/bootstrap-datepicker.css
js/bootstrap-日期选择器.min.js

我的JavaScript

 $(document).ready(function() {
 //AJAX to call the Web Server, when it detects any change in form.
 $('#inputForm').change(function(e) {
    e.preventDefault();
    var form = $(this);
    var post_data = form.serialize();

    $.ajax({
      type: 'POST',
      data: post_data,
      success: function() {
      }
    });
  });

  $('#datepicker').datepicker({
        format: "yyyy-mm-dd",
        todayBtn: "linked",
        clearBtn: true,
        calendarWeeks: true,
        autoclose: true,
        todayHighlight: true,
        orientation: "top left"
       });

});

我的服务器端 Bean

@Named("testbean")
@SessionScoped 
public class testBean implements testapi,Serializable {
    @Override    
    public void dummy() {
             Date dNow = new Date();
             SimpleDateFormat ft =  
             new SimpleDateFormat ("yyyy-MM-dd hh:mm:ss a zzz");
             System.out.println(ft.format(dNow)+": "
                    +"See I am called..");
    }
}

问题

短语 "See I am called.." 预计只在 Web 服务器控制台中打印一次，每次更改日期时也是如此。

但是短语 "See I am called.." 已经打印了 3 次，每次都打印了 3 次，而且每次都更改了日期。这意味着，更改日期会两次调用 Web 服务器。

Info:   2015-04-26 01:49:22 PM CEST: See I am called..
Info:   2015-04-26 01:49:23 PM CEST: See I am called..
Info:   2015-04-26 01:49:23 PM CEST: See I am called..

注意：我试图删除 BootStrap 日期选择器并将日期字段作为简单的文本字段。之后问题就消失了。但只有当我使用 Bootstrap Datepicker 插件时才会出现问题。

我可以知道如何解决这个问题吗谢谢

Answer 1

最简单的方法是记住上次发送的数据，如果相同且没有任何变化就不要发送。

$(document).ready(function() {
var send_data='';
$('#inputForm').change(function(e) {
  e.preventDefault();
  var form = $(this);
  var post_data = form.serialize();
  if (post_data !== send_data ) {
    send_data = post_data;
    $.ajax({
      type: 'POST',
      data: post_data,
      success: function() {
      }
    });
   }
  });
....

HTH 乔治

Answer 2

非常感谢您的回复。

第一

事实上，我不喜欢在日期选择器更改事件本身中使用 ajax 调用。因为我处理的表单不仅有 DatePicker，它还应该有其他输入字段。所以我排除了那个方法

第二
捕捉之前的发送数据显然是另一种选择 send_data = post_data; 这对我有用

第三

不过，我已经找到了问题所在，并找到了无需解决方法即可解决的方法。

我在 Bootstrap v1.4.0 ( bootstrap-datepicker.js )

的日期选择器

下setValue函数调用

我可以看到一个声明

this.element.find('input').val(formatted).change();

当日期选择器显示日历视图和隐藏日历视图时触发。

因此调用网络平台。因为我猜它正在跟踪 Input Text Field 的输入更改事件。日期选择器位于其上。（虽然不确定）

所以我设法将其更改为

this.element.find('input').val(formatted).change(function(e){e.preventDefault();});

在图书馆，我发现我的问题已得到解决。

非常感谢。我希望这些对某人有所帮助。

如何让BootStrap-DatePicker停止提交表单

How to make BootStrap-DatePicker Stop Submit Form

javascript

datepicker

twitter-bootstrap