Support

Account

Register Login

Home › Forums › Front-end Issues › Front-End Form with template (and The Events Calendar)

Solved

Front-End Form with template (and The Events Calendar)

  • The instructions for creating a front-end form are quite solid when working with a standard page template.

    I’m now aiming to integrate an ACF form to submit from an event using The Events Calendar (http://tri.be/). Their template / view system does not include get_header directly to place the acf_form_head above.

    I tried putting it at the very top of my themes’ header.php file – with and without checks around is_single() and matching post type to no avail. The closest I got was the following 2 errors in console from ACF’s input.min.js file :

    TypeError: g is undefined

    …}t.find(“.title h4″).text(acf.l10n.google_map.locating+”…”);t.addClass(“active…

    input….r=4.3.4 (line 13)
    ReferenceError: wp is not defined

    …}t.find(“.title h4″).text(acf.l10n.google_map.locating+”…”);t.addClass(“active…

    input….r=4.3.4 (line 13)
    `

    I’m also posting this on their support forum as I’ve seen a few threads about conflicts on both. Any help you can shed would be appreciated.

  • are you seeing the error in the admin or on a page that the user might view? typically, i don’t use acf form fields to take input from clients. typically i will use my own form fields and then save them using the fields i’ve created using acf.

    for instance, on an auction site that i have, acf is used to show the custom fields on my custom post type. one of the fields on my custom post type called “custom-post-auction-bid” is a field called “auction_cur_bid”. acf displays that current bid value when my admin access the “bid” post.

    however, the data is actually written in this way, during form processing:

    update_post_meta($post_id, 'auction_cur_bid', $bid);

    perhaps rethinking the method of integration will allow you to avoid the conflict altogether, especially since the conflict appears to be related to client side scripting anyway.

  • Only on the front end.

    I’m using the gallery add-on which I purchased purely for the front-end ability to batch upload photos with the standard media upload UI. The gist of the rest of process (which is working):

    • ACF adds a select field to event post type that is populated with Gravity Forms for admin to select which registration form to use. That is displayed on upcoming events via template.
    • Create a CPT for galleries
    • ACF provides meta fields on gallery (eventID, photographer, email and multi-photo from add-on.

    The last piece is having the ACF form show up on event to allow batch upload of photos which is limited by the issue described above.

    I have a temporary workaround of putting a separate the photo submission form onto a separate page that populates the eventID via select field populated with past dated events. But requirement is that everything stays tied to the individual event along with comments, post-event feedback (GF) form.

  • are you running any minification or other client side scripting performance enhancements? if you are, try disabling them to see if the client side error goes away.

  • Hi @Idealien

    To use acf_form, must first run acf_form_head before any HTML is output into the template.

    Are you able to modify the template which this form exists on? You mentioned that Their template / view system does not include get_header directly to place the acf_form_head above. In this case, what do they offer you to edit?

  • Digging deeper I found that in addition to their specific event page types they also wrap inside a more general template – /wp-content/plugins/the-events-calendar/views/ecp-page-template.php – that you can copy into your theme and customize presentation of. That does make a call to get_header() that I can put the acf_form_head() in front of.

    I’m still left with two 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

    Cross-posted onto the tri.be support forum for plugin conflict impact – http://tri.be/support/forums/topic/plugin-conlict-js-errors-from-tec-front-end-acf-form-on-an-event-template/#DiscussionForm

  • Hi @Idealien

    Thanks for the follow up. Looks like the issue now lies in the JS conflict from tribe-events.

    Let me know what you find.

    Thanks
    E

  • FYI – The Tri.be support forum found a resolution for issue with a snippet to de-register the acf-datepicker that, according to them, is conflicting with the use of standard jquery-ui-datepicker. From https://tri.be/support/forums/topic/plugin-conlict-js-errors-from-tec-front-end-acf-form-on-an-event-template/ :

    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.

  • Hi @Idealien

    Thanks for the info. I’ll add this to the to-do,

    Cheers
    E

  • Hi @Idealien

    Thanks again for the bug report.
    I have removed the datepicker JS from ACF, and will now use the native WP datepicker script to reduce conflict issues.

    This will be released in the next version

    Thanks
    E

  • This reply has been marked as private.

  • With TEC 3.5.1, ACF 4.3.7 and WP 3.9 I am getting a similar JS error again.

    The following snippet works to resolve a similar issue with the jquery-ui-datepicker dependancy. It does de-activate the datepicker, which in my particular use case is not needed. I’m not sure why the conflict occurs in the first place either – but hopefully it helps for another future version to resolve conflict.

    
wp_dequeue_script('acf-input' );
wp_deregister_script('acf-input');
wp_register_script('acf-input', '/wp-content/plugins/advanced-custom-fields/js/input.min.js', array('jquery', 'jquery-ui-core'), '4.3.7');
wp_enqueue_script ('act-input' );
Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Front-End Form with template (and The Events Calendar)’ is closed to new replies.