Support

Account

Home Forums Front-end Issues Select2 in frontend form repeater

Helping

Select2 in frontend form repeater

  • 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.

  • 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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.