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

我有一個引導日期選擇器的問題。我已經努力尋找解決方案，但不幸的是我無法找到解決方案。如何使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/bootstrap-da tepicker.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.."); 
    } 
}

問題

短語「See I am called ..」預計僅在Web服務器控制檯中打印一次，每次更改日期時也會這樣。

但是短語「See I am called ..」已經打印三次，每次更改日期。也就是說，更改日期正在向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插件。

我可以知道如何解決這個問題感謝

來源

2015-04-26 Duraivelanc Chockalingam

不知道，但也許是引導躲在普通輸入框和創造在它的上面，每當日期選擇器的日期選擇是改變了普通輸入的值也在不斷變化導致兩個改事件觸發，爲什麼不叫AJAX的日期選擇器的變化本身。 – vinayakj

感謝您的所有答覆地塊。

首先

逸岸我不是在使用日期選擇器改變事件本身的Ajax調用舒服。由於我處理的表單不僅具有DatePicker，而且還應具有其他輸入字段。所以我排除了這種方法

二
追趕前面的發送數據顯然是另一種選擇 SEND_DATA = post_data; 我

三

不過，我已經發現了這個問題，一個辦法解決它沒有一個解決辦法其中一期工程。

我做的日期選擇以下更改爲引導V1.4.0（引導-datepicker.js）

在的setValue函數調用

我能看到的一份聲明

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

這當日期選擇器顯示日曆視圖和隱藏日曆視圖被觸發。

因此，它使呼叫網絡平臺。因爲我猜它是跟蹤輸入文本字段輸入變動事件。 Date-picker位於其上。（不知道雖然）

所以我設法改變，要

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

在庫中，我看到了我的問題得到了fixedc。

非常感謝。我希望這些幫助某人。

來源

2015-04-27 08:37:32

最簡單的方法是記住上次發送的數據和發送不他們，如果他們是相同的，並沒有發生任何改變。

$(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 喬治

來源

2015-04-26 12:28:49

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

回答

相關問題