'.selector-button' click event issue

[psaikali]

Hi,

First of all, thanks for this library, it's really useful.

I do have a problem with my WordPress ACF field that I .fontIconPicker(). So far so good, it's working fine, as below :

But I do have repeating field, so I can add various icon field on my screen. I have no problem initializing the plugin on newly added fields, because ACF offers a JS event when new fields are created.

But because of this event in the library :

this.iconPicker.find('.selector-button').click($.proxy(function () {

There is no way to display the selection dropdown or browse through it via the small arrows. The event does not work on newly added elements into the DOM after creation.

I tried to use refreshPicker(), hoping that the event will be taken into account, but that's not the case

function initAndRefreshIconInputs() {
    var $icon_fields = $('.volticon-field input').not('.fonticoned');

    setTimeout(function(){
        $icon_fields.each(function(){
            $(this).addClass('fonticoned');
            fonticonpick_instance = $(this).fontIconPicker({
                source: icomoon_json_icons,
                hasSearch: false
            });

            fonticonpick_els.push(fonticonpick_instance);
        });

        for (var i = 0; i < fonticonpick_els.length; i++) {
            fonticonpick_els[i].refreshPicker({
                source: icomoon_json_icons,
                hasSearch: false
            });
        }
    }, 50);
}

What can I do ?

Thanks for your help

[micc83]

Are you using ACF fontIconPicker -> https://github.com/micc83/acf-fonticonpicker or this is your own implementation? If it's about ACF fontIconPicker could you create a new issue on the dedicated project (https://github.com/micc83/acf-fonticonpicker/issues). Once you create the new issue can you report which version of ACF are you using? 4 or 5?

[psaikali]

Hi,

Nop, I'm just adding a CSS class to a basic text input ACF field and I then add my own JS code to make it work with fontIconPicker.

But thanks for the link, I should then use this addon instead of my homemade version :)

Thanks !

[micc83]

:smile: Sorry, I thought you were using ACF fonticonpicker indeed. Mind that the ACF fonticonpicker is using the older version (1.x) of jQuery fontIconPicker. This is the code I'm using to support ACF repeater fields: https://github.com/micc83/acf-fonticonpicker/blob/master/acf-fonticonpicker/js/input.js

[psaikali]

Thanks @micc83, but once I add a new flexible content or repeater block, the newly added icon field gets 2 FontIconPicker dropdowns :

And only the second one is reactive.

Any idea ?

[micc83]

Try editing input.js as follow then let me know!

(function($){
    function enableFontIconPickerFor($el) {
        $el.find('.acf-iconpicker').each(function(){
            if ( !$(this).parents('.acf-clone').length ){
                // Let's iconpick!!!
                $(this).fontIconPicker();   
            }
        });
    }
    if( typeof acf.add_action !== 'undefined' ) {
        // ACF5
        acf.add_action('ready append', function( $el ){
            enableFontIconPickerFor($el);
        }); 
    } else {
        // ACF4
        $(document).on('acf/include_fields', function(e, postbox){
            enableFontIconPickerFor($(postbox));
        });
    }
})(jQuery);

[psaikali]

Yeaaaah, you rock. Thanks a lot !

Here is final code : http://img.saika.li/d4n6