Smoothstate.js и Django - форма POST запускается только при втором нажатии

В настоящее время я пытаюсь интегрировать Smoothstate.js в мой проект Django. Я использую фрагмент кода js с сайта github smoothstate.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: проблема № 189 и проблема № 231

Оба о проблеме, что если form POST action указывает на same URI ПОЧТА никогда не будет отправлена. Когда я устанавливаю кеширование формы true Я могу воссоздать это поведение.

Когда я установил его на false и указать POST action к different URI POST будет отправлен, как и должно быть. Установка его на same URI без form caching возвращает меня к первоначальной проблеме.

Это ошибка в Smoothstate.js? Я не вижу, откуда это взялась от Джанго.

Источник

1 ответ

Решение

Я задавал тот же вопрос на странице github smoothstate.js. Похоже, что единственное решение этого - занести в черный список формы.

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

<form class="no-smoothState">
  ...
</form>
Источник
Другие вопросы по тегам