With the new instance I am unable to call methods.

[ankitwwt]

Hello,

I have created a simple multi-select select box field and initialised it with the new Choice(byID).

Now I've tried to re-initialise with the different constant variable in the browser console and tried to set another choice instance and tried to make a call on the setChoice method. I am getting the below error which is highlighted in the screenshot:

Thanks

[mtriff]

You should maintain a copy of the Choices instance returned by new Choice(byID) and interact with the existing instance through that variable.

Re-initializing is not supported.

[ankitwwt]

@mtriff How to access the existing instance from the below code snippet. I have unminifed the js and copied that snippet from there.

initMultiSelect: function () {
    r.isFunction(window.Choices) &&
        r(".some-selector").length &&
        r(".some-selector").each(function (e, n) {
            var a = t(t({}, { removeItemButton: !0, silent: !0, shouldSort: !1, searchEnabled: !0, searchResultLimit: 50 }), window.fluentFormVars.choice_js_vars),
                i = r(n).attr("data-max_selected_options");
            parseInt(i) &&
                ((a.maxItemCount = parseInt(i)),
                (a.maxItemText = function (e) {
                    var t = window.fluentFormVars.choice_js_vars.maxItemText;
                    return (t = t.replace("%%maxItemCount%%", e));
                })),
                (a.callbackOnCreateTemplates = function () {
                    r(this.passedElement.element);
                    return {
                        option: function (e) {
                            var t = Choices.defaults.templates.option.call(this, e);
                            return e.customProperties && (t.dataset.calc_value = e.customProperties), t;
                        },
                    };
                }),
                r(n).data("choicesjs", new Choices(n, a));
        });
}

I have tried but have not gotten access to the Choices object.

Thanks

[ankitwwt]

For all Devs

Here I am posting a helpful solution when you cannot access the choices instance.

Let's say you have created choices select box for the categories and you have the category id(s) as a jquery array and you want to automatically assign the categories to the selection on rendering a form(Like when the form is used for updating some values).

if( cat_array.length > 0 ) {
    jQuery.each( cat_array, function( cat_key, cat_id ){
        if( jQuery( '#idselectorofSelectbox' ).parents( '.choices' ).find( '.choices__list--dropdown .choices__list .choices__item' ).length > 0  ) {
            jQuery( '#idselectorofSelectbox' ).parents( '.choices' ).find( '.choices__list--dropdown .choices__list .choices__item' ).each( function( choices_key, choices_value ) {
                if( choices_value.getAttribute( 'data-value' ) > 0 ) {
                    if( cat_id == choices_value.getAttribute( 'data-value' ) ) {
                        var cat_name        = choices_value.innerText;
                        var assign_choice = '<div class="choices__item choices__item--selectable" data-item="" data-id="1" data-value="' + cat_id + '" data-custom-properties="null" aria-selected="true" data-deletable="">' + cat_name + '<button type="button" class="choices__button" aria-label="Remove item: \'' + cat_id + '\'" data-button="">Remove item</button></div>';
                        jQuery( '#idselectorofSelectbox' ).parents( '.choices' ).find( '.choices__inner .choices__list.choices__list--multiple' ).append( assign_choice );
                        jQuery(this).remove();
                    }
                }
            });
        }
    });
}

Thanks