Smoothstate.js和Django -表单帖子只在第二次单击时触发
我目前正在尝试将Smoothstate.js集成到我的Django项目中。我正在使用来自smoothstate.js github站点的js代码片段。
$(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');
});我的模板看起来如下(为了这个问题，我简化了它)：
<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的工作方式与预期的一样。但当我提交表单时，它不会发送帖子，只会触发动画。当我第二次点击它时，它会发送帖子并按它应该的方式工作。
有什么想法吗？
编辑
我在smoothstate.js上发现了这两个问题：第189期和第231期
两者都是关于这个问题的，如果一个form POST action指向same URI，那么POST永远不会发送。当我将表单缓存设置为true时，我可以重新创建这种行为。
当我将其设置为false并将POST action指向一个different URI时，POST将按应有的方式发送。将其设置为不带same URI的form caching会使我回到原来的问题。
这是Smoothstate.js中的一个bug吗？我看不出这是从django那里来的。
回答 1
Stack Overflow用户
发布于 2017-01-11 01:49:03
我在smoothstate.js github页面上也问过同样的问题。这似乎是唯一的解决办法是黑名单的形式。
$('#main').smoothState({ blacklist: '.no-smoothState' });
<form class="no-smoothState">
...
</form>https://stackoverflow.com/questions/39809205
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号