title: Smoothstate.js and Django - Form POST only triggered on second click
body: <p>Im currently trying to integrate Smoothstate.js into my Django Project.
  I'm using the js code snippet from the smoothstate.js github site.</p>
  
  <pre><code>$(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');
  });
  </code></pre>
  
  <p>My template looks like this (I simplified it for this question):</p>
  
  <pre><code>&lt;head&gt;
  {% load static %}
  &lt;script src="{% static 'js/vendor/jquery.js' %}"&gt;&lt;/script&gt;
  &lt;script src="{% static 'js/vendor/what-input.js' %}"&gt;&lt;/script&gt;
  &lt;script src="{% static 'js/vendor/foundation.js' %}"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="{% static 'css/foundation.css' %}"&gt;
  &lt;link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="main" class="m-scene"&gt;
          &lt;!--...--&gt;
          &lt;div class="row expanded collapse"&gt;
              &lt;div class="scene_element scene_element--fadeinright large-12 columns"&gt;
                  &lt;a href="{% url 'transition' %}"&gt;test&lt;/a&gt;
                  &lt;form action="{% url 'transition' %}" method='POST'&gt;
                      {% csrf_token %}
                      {{form}}
                      &lt;input type="submit" class="button green" value="join"&gt;&lt;/input&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;script src="{% static 'js/jquery.smoothState.js' %}"&gt;&lt;/script&gt;
      &lt;script src="{% static 'js/initSmoothState.js' %}"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>When I click on a link Smoothstate.js works like expected. But when I submit the form it doesn't send a post and just triggers the animations. When I click it a second time it sends the POST and works like it should.</p>
  
  <p>Any ideas?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I've found those two issues on the smoothstate.js:
   <a href="https://github.com/miguel-perez/smoothState.js/issues/189" rel="nofollow">Issue #189</a> and <a href="https://github.com/miguel-perez/smoothState.js/issues/231" rel="nofollow">Issue #231</a></p>
  
  <p>Both are about the Problem, that if a <code>form POST action</code> points to the <code>same URI</code> the POST will never sent. When I set form caching to <code>true</code> I can recreate this behaviour. </p>
  
  <p>When I set it to <code>false</code> and point the <code>POST action</code> to a <code>different URI</code> the <code>POST</code> will be sent like it should be. Setting it to the <code>same URI</code> without <code>form caching</code> brings me back to the original problem.</p>
  
  <p>Is this a bug in Smoothstate.js? I can't see where this should come from django.</p>