Programatically control Select2 fields

• Andrew Fleming

• August 27, 2015 at 6:42 pm

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");
});

• Jonathan

• August 28, 2015 at 5:16 am

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.

• Andrew Fleming

• August 28, 2015 at 11:38 am

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
});

• Jonathan

• September 2, 2015 at 5:01 am

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/

• Andrew Fleming

• September 3, 2015 at 3:52 pm

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?

• Jonathan

• September 4, 2015 at 7:30 am

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.