Plugin Conlict – JS errors from TEC + front-end ACF form on an event template

[Jamie Oastler]

Cross-posted onto ACF support forum: http://support.advancedcustomfields.com/forums/topic/front-end-form-with-template-and-the-events-calendar/#post-11530

The issue occurs in requiring to run acf_form_head() function above get_header(). I’ve added that into my theme copy of default-template.php from plugin/views. Receive the following JS errors:

• TypeError: e.fn.datepicker.noConflict is not a function calling from wp-content/plugins/the-events-calendar/resources/tribe-events.min.js?ver=3.4.1
• TypeError: g is undefined calling from /wp-includes/js/tinymce/tiny_mce.js?ver=359-20131026

It seems one is coming from TEC files and the other (wp-include) likely tied to what ACF uses to bring the media library and functionality to front-end.

A working standard page template example:

<?php
/*
Template Name: Front-End Form
*/

acf_form_head();

get_header(); ?>
			
			<div id="content" class="clearfix row-fluid">
			
				<div id="main" class="span12 clearfix" role="main">

					<?php the_post(); ?>
 
					<?php 
 
						$args = array(
							'post_id' => 'new',
							'field_groups' => array( 252 )
						);
 	
						acf_form( $args ); 
 
					?>
			
				</div> <!-- end #main -->
   
    
			</div> <!-- end #content -->

<?php get_footer(); ?>

The default-template.php which is having errors:

<?php
/**
 * Default Events Template
 * This file is the basic wrapper template for all the views if 'Default Events Template' 
 * is selected in Events -> Settings -> Template -> Events Template.
 * 
 * Override this template in your own theme by creating a file at [your-theme]/tribe-events/default-template.php
 *
 * @package TribeEventsCalendar
 * @since  3.0
 * @author Modern Tribe Inc.
 *
 */

if ( !defined('ABSPATH') ) { die('-1'); }

acf_form_head();

get_header(); ?>

<div id="tribe-events-pg-template">
	<?php tribe_events_before_html(); ?>
	<?php tribe_get_view(); ?>
	<?php tribe_events_after_html(); ?>
</div> <!-- #tribe-events-pg-template -->
<?php get_footer(); ?>

[Brook]

Howdy idealien,

I do appreciate how thoroughly you have documented this, and linking to the other topic helps with context. However, I am not able to find a link to your site to see this in action. I totally understand that this is not always possible, however our hands are a bit tied without basic access. I can not use my browsers console to diagnose the issue. Would it be possible to provide a working link? If you use the “Set as private reply” box your comment and the link will not be made public.

By the way, I apologize that we have not been able to get back to you sooner. It has been a mad house these past 24 hours with many more topics than usual. While we do not guarantee a response time in under 24 hours on weekday, it is pretty rare that we do not provide one.

Please let me know if that will work. Cheers!

– Brook

[Jamie Oastler]

Unfortunately this one is both still only in dev on VM and when launched will be behind a VPN. However, I can give a set of simple instructions that will allow you to replicate in your own test environment along with the templates above. FYI – The field group snippet below was generated via the export feature of ACF. The issue appears to apply to all ACF front-end forms that attempt to display within an event screen.

1) Download and activate ACF: http://wordpress.org/plugins/advanced-custom-fields/

2) Add the following to your theme functions.php file which will generate a new ACF meta form on your posts.

if(function_exists("register_field_group"))
{
	register_field_group(array (
		'id' => 'acf_gallery-details',
		'title' => 'Gallery Details',
		'fields' => array (
			array (
				'key' => 'field_52e306d127d7a',
				'label' => 'Event',
				'name' => 'galleryEvent',
				'type' => 'text',
				'required' => 1,
				'default_value' => '',
				'placeholder' => '',
				'prepend' => '',
				'append' => '',
				'formatting' => 'html',
				'maxlength' => '',
			),
			array (
				'key' => 'field_52e93fe1b5329',
				'label' => 'Photographer Name',
				'name' => 'galleryName',
				'type' => 'text',
				'required' => 1,
				'default_value' => '',
				'placeholder' => '',
				'prepend' => '',
				'append' => '',
				'formatting' => 'html',
				'maxlength' => '',
			),
			array (
				'key' => 'field_52e93ffcb532a',
				'label' => 'Photographer Email',
				'name' => 'galleryEmail',
				'type' => 'email',
				'required' => 1,
				'default_value' => '',
				'placeholder' => '',
				'prepend' => '',
				'append' => '',
			),
			array (
				'key' => 'field_52ebde7123116',
				'label' => 'Photos',
				'name' => 'galleryPhotos',
				'type' => 'image',
				'required' => 1,
				'save_format' => 'object',
				'preview_size' => 'thumbnail',
				'library' => 'all',
			),
		),
		'location' => array (
			array (
				array (
					'param' => 'post_type',
					'operator' => '==',
					'value' => 'post',
					'order_no' => 0,
					'group_no' => 0,
				),
			),
		),
		'options' => array (
			'position' => 'normal',
			'layout' => 'no_box',
			'hide_on_screen' => array (
			),
		),
		'menu_order' => 0,
	));
}

3) Go to Custom Fields window – /wp-admin/edit.php?post_type=acf – and note the ID for field group titled Gallery Details.
4) Replace the array value (252) in the two page template files of my previous update with the ID noted in step 3.
5) Create a new page that uses the template and note that the ACF front-end form loads successfully with no issues.
6) Create an event and view on front-end of site with the default-template.php from your theme. Note that ACF has JS conflict errors related to Tri.be.
7) Debug
8) ????
9) Profit

Thanks
Jamie

[Brook]

Howdy Jamie,

I was indeed able to reproduce this error. Thanks for providing the instructions.

What is happening is that ACF is using it’s own custom datepicker, enqueued with “acf-datepicker”. The thing is, it conflicts with WP’s ‘jquery-ui-datepicker’, which is basically the same thing only it is provided by WordPress. Our plugin uses ‘jquery-ui-datepicker’ to avoid conflicts just like this. Other plugins need to be using the scripts that WordPress provides, as this limits conflicts and optimizes the site loading times. Unfortunately ACF is not doing this.

This code removes the errors by forcing ACF to use the libraries that WordPress provides. However, it could break ACF functionality. You would have to work with them to resolve this.

Does that make sense? Are you able to get it working with that snippet? I wish I could help you urther if not, but really this boils down to ACF not playing well with others. There is not much we can do about that. Please let me know. Cheers!

– Brook

[Jamie Oastler]

Thank you so much for the sample. It did resolve my issue and (thankfully) my form is one that doesn’t require a datepicker on the front-end so including the action in default-template.php prior to the acf_form_head call keeps the scope down to where the error was. I’ll note this ticket back to the cross-post thread on their forum.

[Brook]

Excellent! Glad I could help.

[Author]

Posts