civicrm_state field not catching cf.form.init trigger

[rbaugh]

Describe the bug
I used the "CiviCRM Contact and Address" form template to create a quick test form. When loading up the form on the CF preview option or added as shortcode to a blank page, the cf.form.init trigger doesn't ever seem to kick in. I added an alert script to the $( document ).on( 'cf.form.init cf.add', function( e, data ) { script and could not get it to fire. I then changed the code around slightly to remove the jQuery(document).ready( function( $ ) { wrapper and this seems to allow the code to execute.

To Reproduce
Steps to reproduce the behavior:

1. Go to Caldera Forms and create a new form and base it on the "CiviCRM Contact and Address" template
2. Save the form and preview the page

Expected behavior
Expect the state field to refresh itself and use the default value from the country field to filter out the list of states to selected country.

I adjusted the code on the state field and this below is working.

( function( $ ) {

//jQuery( document ).ready( function( $ ) {

	var countryFieldId = '<?php isset( $country_field ) ? esc_attr_e( $country_field['ID'] ) : print( 'false' ); ?>',
	placeholder = '<?php echo esc_attr( $field['config']['placeholder'] ); ?>';

	var init = function( stateField ) {

		var countryField = countryFieldId ? $( 'select[data-field="' + countryFieldId + '"]' ) : $( 'select[id*="_cf_civicrm_country"]' ),
		allStates = $( 'option', stateField );

		if ( countryField == 'undefined' ) return;

		countryField.on( 'change', function() {

			var countryId = $( this ).val();

			var states;
			if ( ! stateField.data( 'states' ) ) {
				stateField.data( 'states', allStates );
				states = stateField.data( 'states' );
			} else {
				states = stateField.data( 'states' );
			}

			var options = states.filter( function( index, option ) {
				return option.dataset.crmCountryId == countryId;
			} );

			if ( ! options.length ) options = new Option( 'N/A', 0 );

			stateField.html( options );

		} ).trigger( 'change' );

		return stateField;
	}

	$( document ).on( 'cf.form.init cf.add', function( e, data ) {

		var stateField = countryFieldId ? $( 'select[data-field="<?php echo esc_attr( $field_base_id ) ?>"]' ) : $( 'select[id*="_cf_civicrm_state"]' );


		var defaultValue = '<?php echo esc_attr( $field['config']['default'] ); ?>',
		fieldId = '<?php echo esc_attr( $field_id ) ?>';

		// init event
		if ( data && data.fieldIds && data.fieldIds.indexOf( fieldId ) != -1 ) {
			init( stateField ).val( defaultValue ).cfcSelect2();
		}
		// add event
		if ( data && data.field && data.field == fieldId ) {
			init( stateField ).val( defaultValue ).cfcSelect2();
		}
	} );

//} );
})(jQuery);

Other Note
When I initially tested this, it was on a fairly clean install of WP and CiviCRM. I was using the TwentyTwenty theme and when testing the form, it was initially erroring out on this code stating jQuery wasn't defined. So I switched over to a theme we are working on which I forced jQuery to load in the head and this fixed the issue.

Seems that the code could be setup and instead of just echoing inside the form, it could be added with wp_add_inline_script( Caldera_Forms_Render_Assets::field_script_to_localize_slug(), $script_template ); which would add it in the footer with the rest of the CF scripts and makes sure that jQuery is loaded on the page.

[rgilman]

@rbaugh, I'm having the same issue but I'm new to this plugin so a bit lost. Where (what file, etc.) should I add your code?

[rbaugh]

@rgilman The file I edited was below:
https://github.com/mecachisenros/cf-civicrm/blob/master/fields/civicrm_state/field.php

The two lines I adjusted were lines 33 & 88. In the code above you will see the two lines I commented out at the beginning and end and then the two lines I added in as a replacement.

Line 33

( function( $ ) {

//jQuery( document ).ready( function( $ ) { 

Line 88

//} );

})(jQuery);

[rgilman]

Got it. Thanks!