链接到包/ app /您想要的任何内容:http://foundation-datepicker.peterbeno.com/example.html
所以我在我的HTML文件中有一个名为dp-form
的表单,其中有一个名为dp
的文本输入,其属性为name="datepicker"
。我知道datepicker和表单是有效的,因为当我选择一个日期并使用提交按钮时,一切都按预期工作,但是,我不幸有野心勃勃,并决定尝试让jQuery处理发布并提交引导我到关注代码在我的HTML文件的末尾:
<script>
$('#dp').fdatepicker(format='yyyy-mm-dd')
.on('changeDate', function(event) {
var pickedDate = $("#dp").val();
$.ajaxSetup( {data: {csrfmiddlewaretoken: '{{ csrf_token }}'}} );
$.ajax({
url: "/index/",
method: "POST",
data: {'datepicker': pickedDate, 'routepicker': "default"}
});
});
$("#dp-form").submit();
</script>
问题是,一旦我加载了包含页面,它就会从空表单中发布数据(没有点击,日期选择器没有打开,根本没有完成任何操作)并提交它,并且然后继续这样做。它停留在无限循环中这样做,我的页面不断重新加载,因为它不断提交空数据。
答案 0 :(得分:1)
您在每次加载页面时提交表单:
$("#dp-form").submit();
你应该在'changeDate'事件处理程序中调用它:
$('#dp').fdatepicker(format='yyyy-mm-dd')
.on('changeDate', function(event) {
var pickedDate = $("#dp").val();
$("#dp-form").submit();
});
如果您想使用ajax发送表单,可以使用jQuery Form Plugin
<html>
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
$('#dp').fdatepicker(format='yyyy-mm-dd')
.on('changeDate', function(event) {
var pickedDate = $("#dp").val();
$("#dp-form").submit();
});
// bind 'dp-form' and provide a simple callback function
$('#dp-form').ajaxForm(function() {
alert("Thank you for posting");
});
});
//You'll also need this snippet in order to not struggle with csrftoken in Django :
$(function() {
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
}
}
});
});
</script>