carbon-fields Js Hook: apiLoaded not triggered

Version

Carbon Fields: 3
WordPress: 5.1
PHP: PHP Version 7.1.20

Expected Behavior

JS Hook gets triggered

Actual Behavior

JS Hook not triggering

Steps to Reproduce the Problem

Load the admin js with admin_enqueue_scripts
Add the Javascript in the loaded admin.js
navigate through the backend, hooks not triggered

Comments

I added a admin.js and added carbonFields.apiLoaded hook. But this is not triggered.

` function add_cf_hooks_js($hook) {

// jQuery wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', array(), NULL, true); wp_localize_script('jquery', 'themeData', $dataToFrontend); wp_enqueue_script('jquery');

wp_register_script('editjs', get_template_directory_uri() . '/admin/admin.js', array(), NULL, true); wp_enqueue_script('editjs'); } add_action( 'admin_enqueue_scripts', 'add_cf_hooks_js' ); `

(function ($) { "use strict"; $(document).on('carbonFields.apiLoaded', function(e, api) { // Hook to all field changes and log the changed field's name and new value console.log('fooooo!'); // Is triggered. }); })(jQuery);

Mar 18 '19 15:03 enky00

Version 3.0 of CF doesn't only bring support for gutenberg blocks, they've made many more changes to the api and they aren't listed anywhere. The old js api doesn't work anymore because it doesn't exist anymore in v3.0, I've only just found out it myself because my custom validation rules are no longer working after I updated to v3.0

The docs has been partially updated but there's no examples https://docs.carbonfields.net/#/advanced-topics/javascript-hooks

May 26 '19 12:05 alessandrotesoro

Hey!

Anyone found a way to make it work with v3.0 ? :)

Thanks a lot!

Mar 19 '20 16:03 kaleidoscopique

Hi, I've found a workaround:

1 register an id on your container:

Container::make('theme_options', 'ID_CONTAINER',  __('Title'))
        ->set_icon('dashicons-dashboard')

2 enable validation if your container is loaded

jQuery( document ).ready(function() {
  if (jQuery('#carbon_fields_container_ID_CONTAINER').length > 0){
    add_specific_validations();
  }
});

3 Use ->set_classes('slugify') on your filed to better target the validation function

4 Validate in real time or on change events

function add_specific_validations() {
  jQuery(document).on("keyup", "#carbon_fields_container_ID_CONTAINER .MYCLASS .cf-text__input", function (e) {
    clean_text = cleanYourValue(e.target.value);
    jQuery(this).val(clean_text);
  });
}

That's all, obviously not safe as a server-side validation but good enough if you want somethings simple

Apr 07 '21 09:04 red-made

So it looks like the validation API is still not working?

Apr 13 '21 18:04 zahardev

carbonFields.apiLoaded is never triggered, yet it is still listed in the 3.0 documentation. So either the software is broken, or the documentation is wrong.

HtmlBurger; please fix!