Select2 in frontend form repeater

• florianbepunkt

• July 10, 2015 at 2:34 am

Hello,

thank you for this great plugin.

I encoutered an issue when using select2 dropdowns in a frontend form repeater field.

The new added repeater dropdown fields don’t get initialized.

If I initialize them manually the already existing dropdowns get duplicated.

I used following code after acf_form($args);

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.acf-repeater-add-row, .acf-repeater-remove-row').on('click', function() {
            setTimeout(function(){
                jQuery('.acf-form').find('select').each(function() {
                    jQuery(this).select2("destroy");
	            jQuery(this).select2();
		});
	    }, 100);
	});
});
</script>

If somebody has an idea or could help me out here this would be greatly appreciated.

• florianbepunkt

• July 10, 2015 at 7:03 am

Okay, I figured it out. The JS actions ACF offers were the solution. So if someone else stumbles across the same problem, please have a look at http://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/

If you want to initialize a new select2 for example use following JS

acf.add_action('append', function( $el ){
  //$el is the appended element, in this case a row
  $el.find('select').select2();
}

Thanks for this great plugin.