Support » Plugin: Contact Form 7 » $(…).wpcf7InitForm() is not a function

  • Resolved hirasso

    (@nonverbla)


    Hi there,

    with the newest release and the drop of jquery.forms, the function wpcf7InitForm() is not longer available. I have been using this function for my ajax-driven site to re-initialize CF7 for new forms on each ajax page load. Is there another (new) way to initialize CF7 on the fly?

    best
    Rasso

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter hirasso

    (@nonverbla)

    so… one solution could be to wrap the whole first self-invoked function into a wpcf7.init() function:

    
    wpcf7.init = function() {
    
    	$( function() {
    		wpcf7.supportHtml5 = ( function() {
    			var features = {};
    			var input = document.createElement( 'input' );
    
    			features.placeholder = 'placeholder' in input;
    
    			var inputTypes = [ 'email', 'url', 'tel', 'number', 'range', 'date' ];
    
    			$.each( inputTypes, function( index, value ) {
    				input.setAttribute( 'type', value );
    				features[ value ] = input.type !== 'text';
    			} );
    
    			return features;
    		} )();
    
    		$( 'div.wpcf7 > form' ).each( function() {
    			var $form = $( this );
    
    			$form.submit( function( event ) {
    				if ( typeof window.FormData !== 'function' ) {
    					return;
    				}
    
    				wpcf7.submit( $form );
    				event.preventDefault();
    			} );
    
    			$( '.wpcf7-submit', $form ).after( '<span class="ajax-loader"></span>' );
    
    			wpcf7.toggleSubmit( $form );
    
    			$form.on( 'click', '.wpcf7-acceptance', function() {
    				wpcf7.toggleSubmit( $form );
    			} );
    
    			// Exclusive Checkbox
    			$( '.wpcf7-exclusive-checkbox', $form ).on( 'click', 'input:checkbox', function() {
    				var name = $( this ).attr( 'name' );
    				$form.find( 'input:checkbox[name="' + name + '"]' ).not( this ).prop( 'checked', false );
    			} );
    
    			// Free Text Option for Checkboxes and Radio Buttons
    			$( '.wpcf7-list-item.has-free-text', $form ).each( function() {
    				var $freetext = $( ':input.wpcf7-free-text', this );
    				var $wrap = $( this ).closest( '.wpcf7-form-control' );
    
    				if ( $( ':checkbox, :radio', this ).is( ':checked' ) ) {
    					$freetext.prop( 'disabled', false );
    				} else {
    					$freetext.prop( 'disabled', true );
    				}
    
    				$wrap.on( 'change', ':checkbox, :radio', function() {
    					var $cb = $( '.has-free-text', $wrap ).find( ':checkbox, :radio' );
    
    					if ( $cb.is( ':checked' ) ) {
    						$freetext.prop( 'disabled', false ).focus();
    					} else {
    						$freetext.prop( 'disabled', true );
    					}
    				} );
    			} );
    
    			// Placeholder Fallback
    			if ( ! wpcf7.supportHtml5.placeholder ) {
    				$( '[placeholder]', $form ).each( function() {
    					$( this ).val( $( this ).attr( 'placeholder' ) );
    					$( this ).addClass( 'placeheld' );
    
    					$( this ).focus( function() {
    						if ( $( this ).hasClass( 'placeheld' ) ) {
    							$( this ).val( '' ).removeClass( 'placeheld' );
    						}
    					} );
    
    					$( this ).blur( function() {
    						if ( '' === $( this ).val() ) {
    							$( this ).val( $( this ).attr( 'placeholder' ) );
    							$( this ).addClass( 'placeheld' );
    						}
    					} );
    				} );
    			}
    
    			if ( wpcf7.jqueryUi && ! wpcf7.supportHtml5.date ) {
    				$form.find( 'input.wpcf7-date[type="date"]' ).each( function() {
    					$( this ).datepicker( {
    						dateFormat: 'yy-mm-dd',
    						minDate: new Date( $( this ).attr( 'min' ) ),
    						maxDate: new Date( $( this ).attr( 'max' ) )
    					} );
    				} );
    			}
    
    			if ( wpcf7.jqueryUi && ! wpcf7.supportHtml5.number ) {
    				$form.find( 'input.wpcf7-number[type="number"]' ).each( function() {
    					$( this ).spinner( {
    						min: $( this ).attr( 'min' ),
    						max: $( this ).attr( 'max' ),
    						step: $( this ).attr( 'step' )
    					} );
    				} );
    			}
    
    			// Character Count
    			$( '.wpcf7-character-count', $form ).each( function() {
    				var $count = $( this );
    				var name = $count.attr( 'data-target-name' );
    				var down = $count.hasClass( 'down' );
    				var starting = parseInt( $count.attr( 'data-starting-value' ), 10 );
    				var maximum = parseInt( $count.attr( 'data-maximum-value' ), 10 );
    				var minimum = parseInt( $count.attr( 'data-minimum-value' ), 10 );
    
    				var updateCount = function( target ) {
    					var $target = $( target );
    					var length = $target.val().length;
    					var count = down ? starting - length : length;
    					$count.attr( 'data-current-value', count );
    					$count.text( count );
    
    					if ( maximum && maximum < length ) {
    						$count.addClass( 'too-long' );
    					} else {
    						$count.removeClass( 'too-long' );
    					}
    
    					if ( minimum && length < minimum ) {
    						$count.addClass( 'too-short' );
    					} else {
    						$count.removeClass( 'too-short' );
    					}
    				};
    
    				$( ':input[name="' + name + '"]', $form ).each( function() {
    					updateCount( this );
    
    					$( this ).keyup( function() {
    						updateCount( this );
    					} );
    				} );
    			} );
    
    			$form.on( 'change', '.wpcf7-validates-as-url', function() {
    				var val = $.trim( $( this ).val() );
    
    				// check the scheme part
    				if ( val && ! val.match( /^[a-z][a-z0-9.+-]*:/i ) ) {
    					val = val.replace( /^\/+/, '' );
    					val = 'http://' + val;
    				}
    
    				$( this ).val( val );
    			} );
    
    			if ( wpcf7.cached ) {
    				wpcf7.refill( $form );
    			}
    		} );
    	} );
    
    }
    
    wpcf7.init();
    

    Then later, I can call this from my own code:

    
    if( typeof wpcf7 === 'object' && typeof wpcf7.init === 'function' ) {
      wpcf7.init();
    }
    

    Hi,
    Im facing the same problem ony many sites. Could you pls explain where you put the code in?

    Thread Starter hirasso

    (@nonverbla)

    @konsument, I uploaded the full rewritten scripts.js file to my server, you can download it from there and replace the file /plugins/contact-form-7/includes/js/scripts.js with my version:

    http://test.rassohilber.com/wpcf7/scripts.js

    many thanks. Meanwhile Ive found a much easier solution.

    Here’s the best way :

    `function initContactForm() {
    $( ‘div.wpcf7 > form’ ).each( function() {
    var $form = $( this );
    wpcf7.initForm( $form );

    if ( wpcf7.cached ) {
    wpcf7.refill( $form );
    }
    } );

    }`

    thank you, @topitoconnectey

    looks like i was incorrectly told to use $form.wpcf7InitForm() when it’s really wpcf7.initForm( $form )

    did this function change in recent times, though? because it seems like wpcf7InitForm() was once the correct function…?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘$(…).wpcf7InitForm() is not a function’ is closed to new replies.