При использовании smoothstate.js отправка формы вызывает срабатывание smoothstate

Question

У меня есть сайт, использующий smoothstate.js на каждой странице. на нескольких страницах у меня появляется модальное окно с формой. Эти формы работают просто отлично.

На другой странице у меня есть основная форма, включенная в HTML. Когда я нажимаю кнопку отправки в форме, форма фактически отправляется, но запускается smoothstate, которое затухает в содержимом и запускает мой экран загрузки.

Я бы хотел, чтобы этого не произошло. Вот моя функция плавного состояния:

$(function(){
    'use strict';
    var $page = $('#main'),
    options = {
        debug: true,
        prefetch: true,
        cacheLength: 2,
        allowFormCaching: false,
        forms: 'form',
        blacklist: 'input[type="submit"], .animsition-loading, .hs-button',
        onStart: {
            duration: 1050, // Duration of our animation
            render: function ($container) {
                $('.animsition-loading').show();
                $container.addClass( 'slide-out' );
                smoothState.restartCSSAnimations();
            }
        },
        onReady: {
            duration: 0,
            render: function ($container, $newContent) {
                $container.html($newContent);
                sitejs();
                $(document).ready();
                $(window).trigger('load');
            }
        },
        onAfter: function( $container ) {
            $('.animsition-loading').hide();
            $container.removeClass( 'slide-out' );
        }
      },
      smoothState = $page.smoothState(options).data('smoothState');
});

Answer 1

У меня была такая же проблема для меня с формой бюллетеня. Вот решение вашей проблемы. Вы должны добавить класс из черного списка, который есть в вашем JS (например, "no-smoothsate"), в тег FORM. Работает отлично.

<form class="no-smoothState">
...
</form>

Я нашел решение здесь

Answer 2

Я считаю, что smoothstate по умолчанию работает как с формами, так и со ссылками, так как cf7 уже работает с AJAX, вам просто нужно занести в черный список, как уже упоминалось.

Для cf7 это код:

;(function($) {
'use strict';

    var $body = $('html, body'),
    content = $('#main').smoothState({  
        blacklist: '.wpcf7-form',
        // Runs when a link has been activated
        onStart: {
            duration: 500, // 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) {
                // Scroll user to the top, this is very important, transition may not work without this
                $body.scrollTop(0);

                // Remove your CSS animation reversing class
                $container.removeClass('is-exiting');

                // Inject the new content
                $container.html($newContent);

                // Trigger load functions
                $(document).ready();
                $(window).trigger('load');
            }
        },
        onAfter: function($container) {
            initContactForm();
        }
    }).data('smoothState');
})(jQuery);