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");
});
Hi @andrew-fleming
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?
Hi @andrew-fleming
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.
