{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 霸刀☆藐视天下 的问题《Smoothstate.js and Django - Form POST only trigger》','https://www.manongdao.com/q-906628.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
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.
Any ideas?
EDIT
I've found those two issues on the smoothstate.js: Issue #189 and Issue #231
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.
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.
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.