Home › Forums › General Issues › jQuery and new field type
Hi there,
I have a question regarding jQuery in combination with a new custom field type.
I use the custom field template and I added the following example in the create field function:
function create_field( $field )
{
// defaults?
/*
$field = array_merge($this->defaults, $field);
*/
// perhaps use $field['preview_size'] to alter the markup?
// create Field HTML
?>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<?php
}
But now I have the problem, that I have js Script in an external file that I load in the input_admin_enqueue_scripts function:
function input_admin_enqueue_scripts()
{
// Note: This function can be removed if not used
//register front-end scripts
wp_register_script('acf-input-fs_player_d', '/wp-content/themes/lensa/custom/fields/js/fs_player_dd.js', array('acf-input'), $this->settings['version']);
// register acf scripts
wp_register_script('acf-input-fs_player_dd', $this->settings['dir'] . 'js/input.js', array('acf-input'), $this->settings['version']);
wp_register_style('acf-input-fs_player_dd', $this->settings['dir'] . 'css/input.css', array('acf-input'), $this->settings['version']);
// scripts
wp_enqueue_script(array(
'acf-input-fs_player_dd',
'acf-input-fs_player_d',
));
// styles
wp_enqueue_style(array(
'acf-input-fs_player_dd',
));
}
in my external file I have the following:
$(function() {
$( "#dialog" ).dialog();
});
Now it seems that the script is fired before the HTML is fully initalized. Does anyone now what to do?
Thanks in advance,
javanese
Hi @javanese
It is important to place your jQuery code within the acf/setup_fields action.
This ensures that all HTML is ready for jQuery
You can read more in this guide:
http://www.advancedcustomfields.com/resources/getting-started/adding-custom-javascript-jquery-for-fields/
Hi @elliot,
thank you for your answer. I have already read this article, but I don’t reaklly understand it. Do I have to create the acfg/setup_fields action in my wordpress functions.php or directly into my HTML in the create_field function() ?
My create_field function looks like this now. But it doesn’t work 🙁
function create_field( $field )
{
// defaults?
/*
$field = array_merge($this->defaults, $field);
*/
// perhaps use $field['preview_size'] to alter the markup?
// create Field HTML
?>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>
$(document).live('acf/setup_fields', function(e, div){
// div is the element with new html.
// on first load, this is the $('#poststuff')
// on adding a repeater row, this is the tr
$(div).find('.class').each(function(){
$(this).doIt();
});
});
function doIt() {
alert("Hello World!");
}
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<?php
}
Cheers,
javanese
Sorry for speaking to myself. I have figured it out. I have done the following. Thanks again for your help @elliot
<script type="text/javascript">
jQuery(document).on('acf/setup_fields',function(e){
//alert('test');
jQuery( "#dialog" ).dialog();
});
</script>
The topic ‘jQuery and new field type’ is closed to new replies.
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 Cookie Policy. If you continue to use this site, you consent to our use of cookies.