Thank you, Elliot for your previous help. I have come up with some more information. I understand that I am using some third party code, however I have tested this functionality with basic jQuery .post()
methods. Each variant has the same result.
Here is the status of the situation:
acf_form_head()
is at the top of my file.ajaxurl
has been defined.acf_form()
is populated but the ACF WYSIWYGs are not correctly initialized.acf/setup_fields
trigger performs successfully as the media uploaders and location fields initialize their scripts successfully.I edited your wysiwyg.js
file to deliver some debugging information:
// validate tinymce
if( ! _wysiwyg.has_tinymce() )
{
console.log( "FAILED TO VALIDATE TINYMCE" );
return;
}
This indeed returns a failure on the initial page load (as there are no ACF forms or WYSIWYGs). However, even after the AJAX callback has successfully completed, a failure is returned for the number of WYSIWYGs in the form. I am dumb when it comes to anything about tinyMCE. I tried an attempt to solve this within the AJAX success callback (before the `acf/setup_fields’ trigger):
$('.acf_wysiwyg textarea').each(function() {
tinymce.execCommand('mceAddControl', false, $(this).attr('id'));
});
Suggestions or thoughts? I absolutely love ACF and use it for many of my client’s projects (love the repeater fields). I would love to help you solve this issue for future users, so in the meantime, I will be diving into your source and seeing if I can come up with a solution. Feel free to offer your suggestions and move on. I will simply keep posting my findings here for other users (and hopefully we can get some community support on this issue).
I’m getting a similar problem.
After the most recent ACF update today neither previously existing textarea (WYSIWYG) fields will update to the front end nor new textarea fields show up on on the front end for previously existing pages/post types. The fields do however update in the admin side. The changes simply do not propagate to the front end. However on any new pages/post types created the fields update as expected.
Please let me know if my explanation isn’t clear. Thanks!!
P.S. Your plugin seriously rocks! Best plugin around for WordPress by far. Really turned it into a legit CMS.
Of course I can. Doh! Thanks 🙂
Hi @tatemz
I am unable to debug this issue for you at the moment as it would require me to search through 3rd party code.
Lets break down the solution into steps.
1. Being able to alert something after the form has posted and the new HTML is appended to the DOM
2. console.log the new DOM html container after it is updated
3. Use the code I posted above to trigger the acf/setup_fields action on the new DOM element
Your issue is that you are using get_post_meta
For ACF to correctly format any value, you must use the get_field or the_field functions.
Please read the ACF documentation to learn more
Hi @Debatewise
In your first screenshot you can see the kitchen sink button. It is on the far right of the 1st row of WYSIWYG buttons
I don’t see a Kitchen Sink button?
Your help documents say that to Display a field in my Archive template all I need do is include this code
<p><?php the_field('field_name', 'category_7'); ?></p>
With my relevant data. However I can’t seem to get this to work either. Is it possible you could perhaps include a code snippet example for every setup that works on fresh, unmodified installs? Whether it be for adding WYSIWYG’s or Calender or, like in my case, a simple text field. This would certainly help me a lot just now and I suspect a few more out there.
Great looking new forum btw 🙂
Hi @elliot
Below is my code, how it works is I created a filed for ‘title’, ‘txt’ and ‘img’.
Currently the WYSIWG field is being used on the txt section.
<p class=”br-location-dayText txt”><?php echo get_post_meta($post->ID, ‘day_4_text’, true); ?></p>
—this is where the code lives—
<?php if( get_post_meta($post->ID, ‘day_4’, true) ) { ?>
<section class=”br-dayEven”>
<div class=”main-contentWrapper”>
<div class=”br-headlineWrapper”>
<span class=”br-headlineTitle br-dayEven title”><?php echo get_post_meta($post->ID, ‘day_4’, true); ?></span>
</div>
<p class=”br-location-dayText txt”><?php echo get_post_meta($post->ID, ‘day_4_text’, true); ?></p>
<?php if( get_post_meta($post->ID, ‘day_4_image’, true) ) { ?>
” alt=”test” />
<?php } ?>
</div>
</section>
<?php } ?>
Thanks
I’m having a similar problem (not showing the WYSIWYG but the original WYSIWYG), only i’m getting 3 errors from my console:
SyntaxError: illegal character
ajaxurl : \’\’,
ajax.j…4.1.8.1 (regel 13, kol 11)
ReferenceError: acf is not defined
acf.post_id = 1156;
post.p…on=edit (regel 83)
ReferenceError: acf is not defined
acf.post_id = 1156;
Could you please help me?
Perhaps a screen shot to display the problem… This is after the button has been pushed and the AJAX request has filled the now-visible popup container ( please excuse the poor CSS ).
Foundation handles the HTML population with their “reveal” module.
Here is the source for the trigger that I used in the code above.
The AJAX callback and DOM creation begins on Line 144.
My AJAX function is actually the parameter ajax_settings
that is being used on Line 144 and Line 158.
As a note – I can confirm that the popup does open and revel. I can also confirm that the HTML of the form from my WordPress AJAX callback does indeed fill the popup container. The popup container is the very first child in the <body>
tag. And the acf_head() is at the very top of my HTML and is placed via the plugins_loaded
hook with a priority of 1
Hi @sireneweb
Yes. This is quite easy and all you need to do is add a WYSIWYG field, then in your functions.php file, use the acf/update_value filter to hook into the save.
In the filter, you can get the value and use it to update the post’s the_content value. Have a look at the wp_update_post function on the WP codex site.
Good luck!
Hi Elliot,
the post type Promo Boxes (promo-boxes) has:
The promo box CPT uses the standard WP categories
The code above is what I’m running to return the latest five news stories – though that particular segment just the latest five from all categories, not a specific one.
Thanks for your help with this.
Hi @Debatewise
Please click on the ‘kitchen sink’ button to show the 2nd row of buttons
Hi @tatemz
Your code above does not ever change the html of the ajax form.
Where is the new HTML and how is it added to the DOM?
Hi @pawelpoz
I think the conflict here is due to qTranslate.
If you disable that plugin, do the WYSIWYG field’s behave correctly?
the_content is not run on the WYSIWYG field, however ACF runsthe do_shortcode function on the value.
Is it possible that you are not using the correct ACF function to load the data and apply the filter?
What code are you using in your template?
Hi @Sour Mash Steve
Thanks for the info. I’ll do some more thourough testing to get this fixed.
Can you please paste the WYSIWYG value (including shorcodes) here and also the shortcode plugins used? I’ll replicate the same issue and have it fixed in no time
Maybe it is worth more information, but I understand that “live” triggers are able to be used on DOM elements populated after the page has loaded. Likewise, I have set up some working code in order to close this created popup when the newly created ACF form is submitted.
Also here is a helpful example for other users viewing this forum to submit their acf form with jQuery – works very nicely.
$( "#acf-ajax-form" ).live( "submit", function( event ) {
event.preventDefault();
$(this).find('input[type=submit]').attr("disabled", true).val("Processing...");
var formData = $(this).serialize();
var formUrl = formData.return;
$.post(formUrl, formData, function(response) {
// Close the popup container
$('#my-popup-container').foundation('reveal', 'close' );
// Clear the HTML
$('#my-popup-container').html('');
});
});
Is there a way in which we might perform the jQuery trigger that you suggested above (acf/setup_fields
) to mimic the “live” event?
Hey again Elliot,
I have taken the shortcodes out and disabled the associated plug-in I was using.
Even without these it seems that when rendered through the front end any content added through ACF WYSIWYG is adding in P tags in what appears to be a pretty random pattern … sometimes it does and sometimes it doesn’t.
Thanks to you both. Maybe the problem lies in qTranslate? Others seem to be having the same problem with the 2 plugins. The link below was a solution for many (so it may help someone, not me unfortunately).
http://www.qianqin.de/qtranslate/forum/viewtopic.php?f=4&t=3436
I managed a workaround by hiding the core editor and merging a couple of posts together (not ideal but it’s fine!).
Hey Elliot,
I tried it on a normal page using the normal editor and it rendered fine without adding in the extra tags … only seems to be when using the WYSIWYG field for the custom fields.
Thanks,
Steve
It is mb.miniAudioPlayer which is causing the problem.
No JS errors on page. Success AJAX callback function does indeed run. (Is there any way to print JS errors from the AJAX request url?)
Matched ID in JS acf/setup_fileds trigger to the $options[‘form_attributes’][‘id’] from when setting up form.
Ran code after HTML was returned as well as attempted a 5000 milisecond timeout function to double check. (Not really necessary since the HTMl is returned before the AJAX success callback function is run).
If you are familiar with Zurb Foundation, I am using this JS to return the HTML within the container DOM:
$(".reveal-popup-button").click(function(event) {
event.preventDefault();
$("#my-popup-container").foundation("reveal", "open", {
url: ajaxurl,
action: "my_popup_ajax",
type: "POST",
success: function(data) {
$(document).trigger("acf/setup_fields", $("#acf-ajax-form"));
},
error: function() {
}
});
});
And here is my WP AJAX action:
function my_popup_ajax_callback() {
echo "<div id="my-popup-content">";
$args = array(
"post_title" => "Draft",
"post_status" => "draft",
);
$id = wp_insert_post( $args );
$html = my_popup_build_acf_form( $id, 12 );
echo $html;
echo "</div>";
die();
}
add_action( "wp_ajax_my_popup_ajax", "my_popup_ajax_callback" );
And the function that returns the form’s HTML:
function my_popup_build_acf_form( $id, $fieldgroup ) {
$options = array(
"post_id" => $id,
"field_groups" => array( $fieldgroup ),
"form_attributes" => array(
"id" => "acf-ajax-form"
),
"return" => add_query_arg( "updated", "true", get_permalink( $id ) ),
"html_field_open" => "<div>",
"html_field_close" => "</div>",
"html_before_fields" => "",
"html_after_fields" => "",
"submit_value" => "Submit",
"updated_message" => "Post updated.",
);
ob_start();
acf_form( $options );
return ob_get_clean();
}
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.