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

Question

我目前正在尝试将 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>

当我点击 link Smoothstate.js 时，效果如预期。但是当我提交表单时，它不会发送 post 并且只会触发动画。当我第二次单击它时，它会发送 POST 并正常工作。

有什么想法吗？

编辑

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

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

当我将其设置为 false 并将 POST action 指向 different URI 时，POST 将按应有的方式发送。将它设置为 same URI 而没有 form caching 让我回到原来的问题。

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

Answer 1

我在 smoothstate.js github page 上问过同样的问题。看起来唯一的解决办法是将表格列入黑名单。

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

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

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

Smoothstate.js and Django - Form POST only triggered on second click

django

jquery

smoothstate.js