Barba: CF7 Wordpess reload

[biazo]

Hi there, and thank you for developing this framework!
I have an issue with Wordpress CF7 forms...if i load the page for the first time form works correctly, but if i change page and try to send a form it doesn't work in AJAX and it reloads page changing url to urlpath/#form_id.
Can you help me solving this?
Thanks a lot!

[luruke]

Hello @biazo ,
I had the same problem time ago,
you have to dynamically init the CF7 form.

I used this code in my view:

    const loader = $(this.container).find('.ajax-loader');
    if (!loader.length) {
      $('div.wpcf7 > form').each(function() {
        $(this).wpcf7InitForm();
      });
    }

It basically check if there is acf7 in the page(via .ajax-loader), then init the private function wpcf7InitForm on each form.

Hope it helps

[Mulegoat]

Hi Luigi,

Any chance you've come across a similar solution for Gravity Forms?

[biazo]

@luruke thanks a lot, you're great!

[luruke]

@Mulegoat never used,
But reading this https://www.stevenhenty.com/load-gravity-forms-via-ajax/ it seems that it should be enough calling gformInitDatepicker()

[jonny-harte]

Hi, I've tried gformInitDatepicker() but it doesn't seem to work. Has anyone managed to get Gravity forms working? If so, could you provide a bit more detail on how?

[Mulegoat]

Yes. I used it with views and called it on each one with a form within onEnterCompleted e.g.

var Homepage = Barba.BaseView.extend({ namespace: 'page-front-page.php', onEnter: function() { loadSite(); scrollReveal(); openCloseMenu(); openCloseForm(); }, onEnterCompleted: function() { gformInitDatepicker(); initSelect(); initRoyalSlider(); }, onLeave: function() { }, onLeaveCompleted: function() { } });

Hope that helps

[jonny-harte]

Thanks! But no i dont think this will work. I'm not using the datePicker so that function isn't present on the window object. If i load the form in using an admin-ajax.php request it works (but makes the page very slow to load) but for some reason the javascript inside of the barba container doesn't trigger when its insert.

Heres a link to the site http://preto.staging.wpengine.com/

If you scroll down to the Request a table on load it works (click next without selecting anything and the borders should turn red). If you click The Experience at the top and navigate to that page bia barba you'll see the same Request a table form near the bottom, you see the default selects are now present and if you click next nothing happens...

[jonny-harte]

Think i found a fix! if I add the below to the end of the barba page transition the gravity forms work.

eval($('.site-main').find('script').text());

[bramchi]

@hartey11 What a genius hack :-D. And proof Gravity Forms' API is a mess :-(

[mikemedoro]

@luruke For the latest version of CF7(5.0.1), I had to adjust the function:

$( 'div.wpcf7 > form' ).each( function() { var $form = $( this ); wpcf7.initForm( $form ); if ( wpcf7.cached ) { wpcf7.refill( $form ); } });

This solves the issue of the form not working, but now if I do a hard refresh on the page, the form submits twice. Have you run into this issue at all or know of a way to solve? Thanks

[krishna-wac]

Hi,

I also have this same issue but I had some changes from the above code to this.
I have just created a function name as Cf7Init()

function Cf7Init(){
    var loader = $(this.container).find('.ajax-loader');
    if (!loader.length) {      
    $( 'div.wpcf7 > form' ).each( function() {
        var $form = $( this );
         wpcf7.initForm( $form );
         if ( wpcf7.cached ) {
         wpcf7.refill( $form );
         }
    } );
    } 
}

And call this function inside the attr:

if ($('.barba-container').attr('data-namespace') == 'contact') {
  Cf7Init();
}

It works great...! 🙂

[imstanleyyeo]

Thanks for the awesome library!

I am also encountering this issue but am not using views. Just initing Cf7Init() on newPageReady if there's a specific class on page. However, I got this error in the console:

Uncaught (in promise) TypeError: Cannot read property 'container' of undefined

Seems that it couldn't understand "container" var loader = $(this.container).find('.ajax-loader');

Any help appreciated! Sorry for my bad english.

[imstanleyyeo]

I've read from this thread that possible reasons from @luruke that a loaded page might not contain .barba-container with wordpress. I'm using barba on every page with the 2 closing div tag included in footer.php. So not sure what could be wrong.

Hope someone can point me in the right direction.

[imstanleyyeo]

@krishna-wac I've used your Cf7Init() function but I got this error in the console.

Uncaught (in promise) TypeError: Cannot read property 'container' of undefined

Did you encounter this too? How do you resolve this?

Thanks

[samuelgoddard]

Has anyone managed to get this working with V2? All of the threads i've found on the topic all have answers for V1 but nothing for V2 :( any help appreciated