While using smoothstate.js submitting form causes smoothstate to fire

Question

I have site using smoothstate.js on every page. on a couple of pages, I have a modal box pop up with a form. Those forms work just fine.

On another page, I have a basic form included in the html. When I click the submit button on the form, the form actually submits but smoothstate starts which fades out the content and starts my loading screen.

I would like for that not to happen. Here is my smoothstate function:

$(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');
});

score 2 · Answer 1 · edited May 23 '17 at 11:33

2

I had the same problem for me with a newsletter form. Here is the solution to your problem. You have to add the blacklisted class that you have in your JS (for example "no-smoothsate") to the FORM tag. It works perfectly.

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

I found the solution here

edited May 23 '17 at 11:33

Community

1
1

answered May 19 '17 at 08:38

Mathieu Préaud

357
3
16

score 0 · Answer 2 · answered Dec 17 '17 at 12:16

I believe smoothstate is designed to work on forms as well as links by default, so as cf7 already works with AJAX you just need to blacklist as mentioned.

For cf7 this is the code:

;(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);

While using smoothstate.js submitting form causes smoothstate to fire

2 Answers2