Carbon-fields: Js Hook: apiLoaded not triggered

[enky00]

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

1. Load the admin js with admin_enqueue_scripts
2. Add the Javascript in the loaded admin.js
3. 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);

[alessandrotesoro]

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

[kaleidoscopique]

Hey!

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

Thanks a lot!

[red-made]

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

[zahardev]

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

[rmpel]

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!

[mr-akin]

Hey!

Any update on this?

Thanks

[nilsringersma]

Hi HtmlBurger,

Do you guys have an update about this?

Thanks!