I want to give focus to a select field and set its value when a user adds a new row to a repeater field. How would I go about this?
The ACF docs describe the acf.add_action
which gives you access to the elements of the new row.
The Select2 docs describe methods to programatically control components.
The following code combines these methods in an attempt to give focus to a select element, but they have no effect. It does not throw errors either.
acf.add_action('append', function( $el ){
var $wood = $el.find( '#acf-field_55c1f48f145b8-55dec8c84845f-field_55c1f4bd145b9');
$wood.select2("open");
});
Please try to post code in code-tags so it’s easier to read, copy etc 🙂
There’s a few things you can check here. For starters, make sure that your selector is correct
#acf-field_55c1f48f145b8-55dec8c84845f-field_55c1f4bd145b9
I think that all subfield have their own specific IDs so you might have to rethink how you target them. Also, do a console.log($el)
to see wether the element you’re in actually has the select field as a descendant.
Thanks for the troubleshooting tips Jonathan. I made some tweaks to my selectors and with the following code was able to give the Select2 field focus when a new row is added.
acf.add_action('append', function( $el ){
var $wood = $el.find( '[data-name="bulk_wood"] select');
$wood.focus();
$wood.select2('open');
});
I’m still unable to set the value of the Select2 field though. This next snippets work as expected setting the value of text inputs using data from the previous row. Is it possible to set the value of a Taxonomy field type with the Select2 appearance? I think the AJAX parts are complicating this task.
acf.add_action('append', function( $el ){
var $prev_row = $el.prev();
var $wood = $prev_row.find( '[data-name="bulk_wood"] select' ).val();
var $thickness = $prev_row.find( '[data-name="bulk_thickness"] input' ).val();
$el.find( '[data-name="bulk_thickness"] select' ).append(new Option('text', 'value')); // Not working
$el.find( '[data-name="bulk_thickness"] input' ).val( $thickness ); // Works great
});
No problem!
Hmm perhaps it would be as simple as setting the value parameter in the field object for the select field? I haven’t tried this myself..
http://www.advancedcustomfields.com/resources/acfload_field/
Thanks for the suggestion Jonathan.
I want to pre-fill a select field within a repeater row, based off the same sub-field in the previous row, before any of the data is saved to the database so JavaScript is the only option I can see.
I noticed the select2_args
filter on the bottom of the Adding custom javascript to fields page, but its documentation is minimal. I assume $select
is the current field, but args
and settings
are not clear.
Can you provide more detail about this filter and how it works?
Sure, The select2_args is essentially exactly what you can set for the select2 library which you can find documentation for here: https://select2.github.io/examples.html
You can easily check which settings ACF sets per default by just doing a console.log(args);
.
I’m not 100% sure what the other two parameters are but I would suspect the $select is the select element this would be applied to and perhaps settings is the field settings.
You must be logged in to reply to this topic.
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!
🚀 This week’s session of ACF Chat Fridays dips into the preliminary results of our first ever user survey. Don’t miss it! https://t.co/3UtvQbDwNm pic.twitter.com/kMwhaJTkZc
— Advanced Custom Fields (@wp_acf) May 9, 2023
© 2023 Advanced Custom Fields.
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.