acf_form_head and color picker after ajax load

• tempranova

• December 5, 2013 at 4:16 am

Hello! I am loving the plugin. But, I’m bringing up the front-end editor via AJAX on a page. Essentially, the user has a short list of posts, and can click any post to “pop up” an editing box with the various meta fields etc that are editable (the front end form).

Everything works great, updates fine, etc. However, when it’s called via AJAX the form doesn’t properly load its JQuery, i.e., the color picker doesn’t pop up when clicking the boxes the way it does when it’s not called with AJAX.

Is there a simple code I can add to ACF files that will load the color picker Jquery even if AJAX is loaded on a given page? As I said everything works fine when the front end form is loaded without AJAX, the color picker works, it’s only in the AJAX load that the color picker jquery doesn’t appear to load. Thanks, great plugin.

• Elliot

• December 5, 2013 at 10:07 am

Hi @tempranova

Firstly, make sure all the ACF scripts and styles are being loaded on the page, then when you AJAX request places the new html into the DOM, you will need to run a JS action on the new DOM elements.

Please note that in v5, this JS action will change, but for now it is a jQuery event called ‘acf/setup_fields’

You can read about how to use it here:
http://www.advancedcustomfields.com/resources/tutorials/adding-custom-javascript-jquery-for-fields/

To trigger the event on your new jQuery elements, use it like so:

var $el = $('.new-HTML-elements');
$(document).trigger('acf/setup_fields', [ $el ]);

Thanks
E

• tempranova

• December 6, 2013 at 5:00 am

This must be the solution. I suppose I just need to learn how to implement this more. I don’t understand how to use this code properly. I’ve pasted a simplified version of the code I am calling with AJAX. If you can help me fill out the proper div and classes so that the code you gave me would work, that would be really nice. But I understand that all the resources are there and it’s really up to me to figure it out, so if not, that’s OK too. Thanks for the help.

<?php 
acf_form_head();
/*
Template Name: pineditquote.php
*/
?>
<?php
   $post = get_post($_POST['id']);
?>
<?php if ($post) : ?>
    <?php setup_postdata($post); ?>

    	<div id="immediate_options_single_box" class="immediate_options_single_box">
        <div id="io_form">
<?php $options = array(
    'post_id' => $post->ID, // post id to get field groups from and save data to
    'field_groups' => array(), // this will find the field groups for this post (post ID's of the acf post objects)
    'form' => true, // set this to false to prevent the <form> tag from being created
    'form_attributes' => array( // attributes will be added to the form element
        'id' => 'post',
        'class' => '',
        'action' => '',
        'method' => 'post',
    ),
    'return' => add_query_arg( 'updated', 'true', get_permalink() ), // return url
    'html_before_fields' => '', // html inside form before fields
    'html_after_fields' => '', // html inside form after fields
    'submit_value' => 'Update', // value for submit field
    'updated_message' => 'Post updated.', // default updated message. Can be false to show no message
);
acf_form( $options ); ?>

            </div>
		</div>
        
<?php endif; ?>

• Elliot

• December 6, 2013 at 9:53 am

Hi @tempranova

The code you pasted is the PHP template for generating the HTML.

This is the wrong side of the AJAX call to use the jQuery trigger. You need to run the trigger in the JS, where you call the $.ajax( function

Hope that helps.

Thanks
E