JS Error when saving my custom module settings

Hi, community! I hope that you can help me. I’m trying to create my own button module, but every time when i click “save” button i get following JavaScript erorr:

Beaver Builder caught the following JavaScript error. If Beaver Builder is not functioning as expected the cause is most likely this error. Please help us by disabling all plugins and testing Beaver Builder while reactivating each to determine if the issue is related to a third party plugin.

“Error: Permission denied to access property “apply”” on line 3 of [fl-builder.min.js:6:8816]

​really i do not understand why this happens, but when i remove “Title” field from my “attributes” section, error disappears.

Is it a bug, how to avoid this? I have really simple configuration, but can not make this work, please help!

Console error: Screenshot by Lightshot

My code:

<?php

class MyTestButton extends \FLBuilderModule {

	public function __construct() {

		parent::__construct( [
			'name'          	=> __( 'Liquid Button', 'myblock'),
			'description'   	=> __( 'A button with liquid hover effect', 'myblock'),
			'category'				=> __( 'Buttons', 'myblock'),
			'group' 					=> __( 'My group', 'myblock'),
			'dir'           	=> plugin_dir_path( __FILE__ ),
			'url'           	=> plugin_dir_url( __FILE__ ),
			'editor_export' 	=> true,
			'enabled'       	=> true,
			'partial_refresh' => true
		]);

		$this->add_css( 'mytest-button');
		$this->add_js( 'mytest-button');

	}

}

FLBuilder::register_module( 'MyTestButton', [
	'general' => [
		'title' => esc_html__( 'General', 'myblock' ),
		'sections' => [

			'attributes' => [
				'title' => esc_html__( 'Attributes', 'myblock' ),
				'fields' => [

					'title' => [
						'type' => 'text',
						'label' => esc_html__( 'Button title', 'myblock' ),
						'default' => esc_html__( 'Click me!', 'myblock' ),
					],
					'address' => [
						'type' => 'text',
						'label' => esc_html__( 'Link URL', 'myblock' ),
						'default' => '',
					],
					'target' => [
						'type' => 'select',
						'default' => '_self',
						'label' => esc_html__( 'Target', 'myblock' ),
						'options' => [
							'_self' => esc_html__( 'Current window', 'myblock' ),
							'_blank' => esc_html__( 'New window', 'myblock' ),
						],
					],
					'align' => [
						'type' => 'select',
						'default' => 'left',
						'label' => esc_html__( 'Button align', 'myblock' ),
						'options' => [
							'left' => esc_html__( 'Left', 'myblock' ),
							'center' => esc_html__( 'Center', 'myblock' ),
							'right' => esc_html__( 'Right', 'myblock' ),
						],
					],

				]
			],

			'size' => [
				'title' => esc_html__( 'Size', 'myblock' ),
				'fields' => [

					'width' => [
						'type' => 'text',
						'label' => esc_html__( 'Width', 'myblock' ),
						'default' => 200,
					],
					'height' => [
						'type' => 'text',
						'label' => esc_html__( 'Height', 'myblock' ),
						'default' => 75,
					],

				]
			],

			'style' => [
				'title' => esc_html__( 'Style', 'myblock' ),
				'fields' => [

					'accent' => [
						'type' => 'select',
						'default' => 'alpha',
						'label' => esc_html__( 'Accent color', 'myblock' ),
						'options' => [
							'alpha' => esc_html__( 'Alpha', 'myblock' ),
							'beta' => esc_html__( 'Beta', 'myblock' ),
							'gamma' => esc_html__( 'Gamma', 'myblock' ),
							'delta' => esc_html__( 'Delta', 'myblock' ),
						],
					],

				]
			],

		]
	]
]);

?>

Hi, guys! I understand that i’m not a buyer, just a user who was interested in that plugin. Is there a chance to get support regarding this problem? It looks like a bug (i wrote the code by using your official manual), and, to be honest, i don’t have a wish to buy a premium version of bugged software without any support of free version :frowning:

You have not included any of the js/css or frontend code so all I could do was test the module file and got no errors whatsoever.

Why are you using esc_html__() for all your labels? Change them all out for straight text to start with unless you are planning to make your module translatable?

Hi,

Just because your custom code isn’t working doesn’t mean this is a bug in Beaver Builder. It is more likely to be an error with your code. If you can provide all files for your custom module we can take a closer look.

Hi, thank you for your time regarding this. I have uploaded all code that i use here https://drive.google.com/file/d/1rWkjBEBK1sYXdJSbZwpPaua-0VYtzhTS/view?usp=sharing

i still get this error http://prntscr.com/pa6pn5

@pross i don’t have any CSS / JS at this time, so i believe, array of configuration for Beaver should work, but it does not.

@Danny, i don’t see any error in my code, this is just a config that was coded regarding your official docs

p.s. i’m using standard TwentySixteen theme and only one plugin active: Beaver Builder Plugin (Lite Version)

Can you replace above code with

class MyTestButton extends FLBuilderModule {

Well what I can provide for free is some advice.

  1. Dont use esc_html__() use __(), you are copying a demo module, so start with what were using.
  2. As suggested dont use the forward slash, you are not using namespaces, neither are we.
  3. You said you do not have any js/css files yet you are enqueuing theme as mytest-button.

As I mentioned yesterday I copied your module code into another … and it appeared in the builder and the settings opened fine. I didnt need to modify your code.

Guys, i have just noticed: this error happens in Firefox, in Chrome it works fine!

Right in that case its a WP/tinymce issue. Good thing is I reported it to them a year ago and in wp 5.3 its finally patched, so you can blame them for the bugged out software.

So, do you recommend to wait for WP 5.3? Right now i’m using 5.2.3

Anyway, thank you for your time

Dont click into number fields, use the little up/down icons next to the numbers thatsd what triggered the error on firefox, its actually a tinymce issue and WP had to wait for them to fix it upstream. Use Chrome is the other option.

1 Like