2016-10-01 2 views
1

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

Любые идеи?

EDIT

Я нашел эти два вопроса на smoothstate.js: Issue #189 и Issue #231

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

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

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

ответ

0

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

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

<form class="no-smoothState"> 
    ... 
</form> 
Смежные вопросы