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>

当我点击一个链接时，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。

Answer 1

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

@media screen and (max-width: 768px) {
    #top-btn { display: none; }
}

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

1 个答案: