Smoothstate.js和Django - 表单POST仅在第二次点击时触发

我正在尝试将Smoothstate.js集成到我的Django项目中。我使用的是来自smoothstate.js github网站的js代码片段。Smoothstate.js和Django - 表单POST仅在第二次点击时触发

$(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就像预期。但是当我提交表单时，它不会发送帖子，只会触发动画。当我再次单击它时，它会发送POST并按照它应该的方式工作。

任何想法？

编辑

我发现在smoothstate.js这两个问题： Issue #189和Issue #231

两者都是这个问题，如果一个form POST action指向same URI的POST永远发送。当我将表单缓存设置为true时，我可以重新创建此行为。

当我将它设置为false和点POST action到different URI的POST将被送到像它应该是。将它设置为same URI而没有form caching会使我回到原来的问题。

这是Smoothstate.js中的错误吗？我看不到这应该来自django。

来源

2016-10-01 LonnyT

我对smoothstate.js github page提出了同样的问题。它看起来像唯一的解决方案是黑名单的形式。

$('#main').smoothState({ blacklist: '.no-smoothState' }); 

<form class="no-smoothState"> 
    ... 
</form>

来源

2017-01-11 01:49:03 LonnyT

Smoothstate.js和Django - 表单POST仅在第二次点击时触发

回答

相关问题