Smoothstate.js和Django-仅在第二次单击时触发表格POST [英] Smoothstate.js and Django - Form POST only triggered on second click
问题描述
我目前正在尝试将Smoothstate.js集成到我的Django项目中. 我正在使用来自smoothstate.js github网站的js代码片段.
Im currently trying to integrate Smoothstate.js into my Django Project. I'm using the js code snippet from the smoothstate.js github site.
$(function(){
'use strict';
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 250, // Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},
smoothState = $('#main').smoothState(options).data('smoothState');
});
我的模板如下所示(我对此问题进行了简化):
My template looks like this (I simplified it for this question):
<head>
{% load static %}
<script src="{% static 'js/vendor/jquery.js' %}"></script>
<script src="{% static 'js/vendor/what-input.js' %}"></script>
<script src="{% static 'js/vendor/foundation.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/foundation.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="main" class="m-scene">
<!--...-->
<div class="row expanded collapse">
<div class="scene_element scene_element--fadeinright large-12 columns">
<a href="{% url 'transition' %}">test</a>
<form action="{% url 'transition' %}" method='POST'>
{% csrf_token %}
{{form}}
<input type="submit" class="button green" value="join"></input>
</form>
</div>
</div>
</div>
<script src="{% static 'js/jquery.smoothState.js' %}"></script>
<script src="{% static 'js/initSmoothState.js' %}"></script>
</body>
当我单击链接时，Smoothstate.js的工作与预期的一样.但是，当我提交表单时，它不会发送帖子，而只是触发动画.当我第二次单击它时，它将发送POST并按应有的方式工作.
When I click on a link Smoothstate.js works like expected. But when I submit the form it doesn't send a post and just triggers the animations. When I click it a second time it sends the POST and works like it should.
有什么想法吗?
编辑
我在smoothstate.js上发现了这两个问题: 第189期和
I've found those two issues on the smoothstate.js: Issue #189 and Issue #231
两者都与问题有关，如果form POST action指向same URI，则POST将永远不会发送.当我将表单缓存设置为true时，我可以重新创建此行为.
Both are about the Problem, that if a form POST action points to the same URI the POST will never sent. When I set form caching to true I can recreate this behaviour.
当我将其设置为false并将POST action指向different URI时，将按原样发送POST.将其设置为不带form caching的same URI会使我回到原来的问题.
When I set it to false and point the POST action to a different URI the POST will be sent like it should be. Setting it to the same URI without form caching brings me back to the original problem.
这是Smoothstate.js中的错误吗?我看不到这应该来自Django.
Is this a bug in Smoothstate.js? I can't see where this should come from django.
推荐答案
I've asked the same question on the smoothstate.js github page. It looks like the only solution to this is to blacklist the forms.
$('#main').smoothState({ blacklist: '.no-smoothState' });
<form class="no-smoothState">
...
</form>
这篇关于Smoothstate.js和Django-仅在第二次单击时触发表格POST的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
