Question

我的bootstrap datepicker有问题。我努力寻求解决方案，但不幸的是我无法找到解决方案。

问题描述 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 /自举-datepicker.css
JS /自举-datepicker.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..");
    }
}

问题

短语＆＃34;看到我被称为...＆＃34;预计只会在Web Server控制台中打印一次，每次更改日期时也是如此。

但是短语＆＃34;看到我被称为...＆＃34;每次打印三次，更改日期。这意味着，更改日期是两次调用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 Datepicker并将日期字段作为简单文本字段。之后问题就消失了。但只有当我使用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

感谢你的回复。

<强>第一

事实上，我不习惯在datepicker更改事件本身中使用ajax调用。因为我处理的Form不仅有DatePicker，它还应该有其他的Input字段。所以我排除了那种方法

<强>第二
捕获先前的发送数据显然是另一种选择 send_data = post_data; 这对我有用

第三次

但是，我已经找到了问题，并找到了解决问题的方法，但没有解决方法。

我做了以下更改 Bootstrap v1.4.0的Datepicker（bootstrap-datepicker.js）

在 setValue 下调用

我可以看到一个声明

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

当Datepicker显示日历视图并隐藏日历视图时，会触发此操作。

因此它调用了web平台。因为我猜它正在跟踪输入文本字段的输入更改事件。日期选择器所在的位置。（虽然不确定）

所以我设法将其改为

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

在图书馆，我看到我的问题得到了解决。

非常感谢你。我希望这些可以帮助别人。

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

2 个答案: