Smoothstate.js 및 Django - 양식 POST는 두 번째 클릭시에만 트리거됩니다.

현재 Smoothstate.js를 내 장고 프로젝트에 통합하려고합니다. 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

모두 그 경우 same URI에서 POST에 form POST action 포인트 않습니다, 문제에 대한 있습니다 보냈습니다. 양식 캐싱을 true으로 설정하면이 동작을 다시 만들 수 있습니다.

false으로 설정하고 POST action을 different URI으로 지정하면 POST이 전송되어야합니다. form caching없이 same URI으로 설정하면 문제가 발생합니다.

이것은 Smoothstate.js의 버그입니까? 나는 이것이 장고에서 어디서 올지 알 수 없다.

출처

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는 두 번째 클릭시에만 트리거됩니다.

답변

관련 문제