Asynchronous Loading form using Barba/Swup?

Get Help
, , ,
1

Hi, I know I’m not the only one with this issue and would love to resolve this for the community!

The following code allows Gforms to load asynchronously using gravity forms version 2.4 and works great with Swup.js

I’m using GitHub - muicss/loadjs: A tiny async loader / dependency manager for modern browsers (899 bytes) to load JS asynchronously with a call back function. (HW is just my name space and HW.hwRequire utilizes the loadjs function).

Please see screenshot. This code DOES NOT work in gravity forms 2.5+ because of the script added to the very top of the <head> element.

It would be great if Gravity Forms was compatible with Swup and Barba

Thanks!!!

In functions.php

$GLOBALS["gform_script_count"] = 0;

// Force Gravity Forms to init scripts in the footer and ensure that the DOM is loaded before scripts are executed.
add_filter( 'gform_init_scripts_footer', '__return_true' );

add_filter( 'gform_cdata_open', 'wrap_gform_cdata_open', 99 );
add_filter( 'gform_cdata_close', 'wrap_gform_cdata_close', 99 );

function wrap_gform_cdata_open( $content = '' ) {
	$scriptcount = $GLOBALS['gform_script_count'];
	$content = "
		HW.loadGform$scriptcount = function(){
			HW.hwRequire('gravityformsLoad', function() {
				$content		
	";

	return $content;
}

function wrap_gform_cdata_close( $content = '' ) {
	$scriptcount = $GLOBALS['gform_script_count'];

	$content .= "}); };
		
		HW.loadGform$scriptcount();
	
	";
	
	$GLOBALS["gform_script_count"]++;

	return $content;
}
	
function do_wrap_gform_cdata() {
	if (
		is_admin()
		|| ( defined( 'DOING_AJAX' ) && DOING_AJAX )
		|| isset( $_POST['gform_ajax'] )
		|| isset( $_GET['gf_page'] ) // Admin page (eg. form preview).
		|| doing_action( 'wp_footer' )
		|| did_action( 'wp_footer' )
	) {
		return false;
	}
	return true;
}

inline script on page after the gravity form shortcode

				<script>
					if(!loadjs.isLoaded('jquery')) {
						loadjs([hwJsPlugDir + 'jquery.js'], 'jquery');



						loadjs.ready('jquery', function() {
							loadjs([hwJsPlugDir + 'customselect.js', siteurl + '/wp-content/plugins/gravityforms/js/jquery.json.js', siteurl + '/wp-content/plugins/gravityforms/js/jquery.maskedinput.min.js', siteurl + '/wp-content/plugins/gravityforms/js/gravityforms.min.js'],  'gravityformsLoad', {async: false});
						});	
					}	
				</script>

image
image1920×868 128 KB

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.