Support

Account

Home Forums Backend Issues (wp-admin) List of JS hooks

Solving

List of JS hooks

  • Hi,

    I’ve been looking for a list of JS hooks. All I found in the documentation is this list of actions and filters. Is it a complete list of ACF JS hooks?

    I’m looking for a callback which is triggered when the field value is changed. Is there a hook for it?

    PS
    Yes, I know I don’t need ACF hook for it. I can attach an event to the DOM element, but I’m looking for an elegant solution which is not HTML structure dependant.

  • Hi @wube

    I’m afraid all of the available actions are there. Please use “change” event to do it.

    Thanks 🙂

  • Thanks, I already did it, but I was looking for a better solution. I don’t want to rely on DOM. The HTML structure might change in the new version and my JS will stop to work.

    I’ve posted a feature request.

  • I was wrong. There is a undocumented hook (acf-input.js, 2483 line), it’s called… ‘change’ 🙂
    So it’s possible to listen for the ‘change’ event.

    It would be good to create a documentation for JS hooks anyway.

  • Hi @wube

    Great work on finding that hook. I guess I missed it because it isn’t listed in the fields model (line 2213 in version 5.3.5). If you could provide an example how you use it, that would be great!

    Thanks!

  • Sure

    
    var imageInputOnChange = function ($input) {
    
        // This is the only way to check what field has been changed.
        if ($input.context.name !== 'acf[field_56d99d7de115e]') {
            return;
        }
    
        // Finding the image requires DOM traversing
        var $image = $input.closest('.acf-image-uploader').find('img');
        
        // Do something when the uploaded image is fully loaded
        $image.on('load', imageOnLoad);
    };
    
    var imageOnLoad = function (image) {
        // Do something...
    };
    
    acf.add_action('change', imageInputOnChange);
    

    So as you can see using this hook requires some additional effort to determine which field’s value was changed. That’s why I’ve posted this request.

  • Hi, thanks for this useful example.

    How would you go about detecting the change on a switch field?

    Right now it seems my function (triggered like yours with the “change” hook event) fires before the switch is changed (the visual switch div receives an ‘-on’ class). It causes my function to not be able to check properly if the switch is on or not.

    I’m no JS or WP expert but I was wondering if there was a way to tell my function to fire after the acf jquery, using the “change” hook.

    Thanks a lot for the help fellas,

  • Looks like there’s been an update because now you can just do this. I took this from their API documentation page. You can change the selectors in this to do whatever you want, the code below will fire two events, one for all inputs on change the other specifically for text input types.

    var instance = new acf.Model({
        events: {
            'change': 'onChange',
            'change input[type="text"]': 'onChangeText',
        },
        onChange: function(e, $el){
            e.preventDefault();
            var val = $el.val();
            // do something
        },
        onChangeText: function(e, $el){
            // do something for just text inputs and then call the normal change callback
            this.onChange(e, $el);
        }
    });
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.