Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

JSONEditor.AbstractTheme.extend is not a function

See original GitHub issue

General information

json-editor version: 2.2.1

Expected behavior

Adjust custom theme on e.g. bootstrap4

Actual behavior

Error

Uncaught TypeError: JSONEditor.AbstractTheme.extend is not a function
    at JsonEditor.js:25

Steps to reproduce the behavior

<html>

<head>

</head>

<body>


    <div id="editor_holder"></div>

    <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
    <script>


        const defaultSchema = {
            'title': 'Person',
            'type': 'object',
            'required': [
                'name'
            ],
            'properties': {
                'name': {
                    'type': 'string',
                    'description': 'First and Last name',
                    'minLength': 4,
                    'default': 'Jeremy Dorn'
                }
            }
        }

        JSONEditor.defaults.themes.mytheme = JSONEditor.AbstractTheme.extend({
            getTable: function () {
                // Base function creates an empty <table> DOM element
                var el = this._super();

                // Modify this base element
                el.style.fontSize = '50px';

                return el;
            }
        });

        const element = document.getElementById('editor_holder');
        const options = {
            schema: defaultSchema,
            theme: 'mytheme'
        }
        const editor = new JSONEditor(element, options);
    </script>
</body>

</html>

Issue Analytics

State:
Created 3 years ago
Comments:13

Top GitHub Comments

4reactions

fbackercommented, Jun 30, 2020

So an update to the docs might be needed to clarify the new way of customize the schema editor.

// Create new theme 'mytheme'

// add rules object, else it will not work.
JSONEditor.defaults.themes.mytheme.rules = {};

/**
 * Customize bootstrap4 theme to work with materialkit
 */
JSONEditor.defaults.themes.mytheme = class mytheme extends JSONEditor.defaults.themes.bootstrap4 {
	getFormControl(label, input, description, infoText) {
		const el = super.getFormControl(label, input, description, infoText);
		el.classList.add('bmd-form-group');
		return el;
	}
	getSelectInput(options, multiple) {
		const el = super.getSelectInput(options);
		el.classList.add('fs-select');
		el.dataset.style = "btn btn-primary btn-round";
		return el;
	}
};



/**
 * Custom string gui editor
 */
JSONEditor.defaults.editors.imagepicker = class myeditor extends JSONEditor.defaults.editors.string {
	build() {
		super.build();
		const elIcon = document.createElement('i');
		elIcon.classList.add('fas', 'fa-book');

		const elBtn = document.createElement('button');
		elBtn.type = 'button';
		elBtn.appendChild(elIcon);
		elBtn.appendChild(document.createTextNode("Browse"));
		elBtn.classList.add('btn', 'btn-sm');
		elBtn.addEventListener('click', (e) => this.clickHandler(e));

		this.control.appendChild(elBtn);
	}
	clickHandler(e) {
		$(editor).trigger('imagepicker', [this, this.value]);
	}
};
JSONEditor.defaults.resolvers.unshift(schema => {
	if (schema.type === "string" && schema.format === "imagepicker") {
		return "imagepicker";
	}
});


/**
	Override behavior of existing gui editor
*/
JSONEditor.defaults.editors.select = class myeditor extends JSONEditor.defaults.editors.select {
	setOptInCheckbox(header) {
		super.setOptInCheckbox(header);
		this.optInCheckbox.addEventListener('click', () => {
			// do custom logic
		});
	}
};

1reaction

machinaeXlassecommented, Jun 18, 2020

Had the same problem when updating from v 2.2.

Thanks for the clarification!

For anyone else stumbling across. I also took a moment to realize I will need to change ‘super’ calls to get the inherited elements when overwriting functions.

Before I did

JSONEditor.defaults.theme = 'mytheme'

JSONEditor.defaults.themes.mytheme = JSONEditor.AbstractTheme.extend({
      getFormInputLabel: function (text) {
		var el = this._super(text);
		el.style.display = 'block';
		el.style.marginBottom = '3px';
		el.style.fontWeight = 'bold';
		return el;
	}
})

Now it is

JSONEditor.defaults.theme = 'mytheme'

JSONEditor.defaults.themes.mytheme = class mytheme extends JSONEditor.AbstractTheme {
	getFormInputLabel(text) {
		var el = super.getFormInputLabel(text);
		el.style.display = 'block';
		el.style.marginBottom = '3px';
		el.style.fontWeight = 'bold';
		return el;
	}
}

Top Results From Across the Web

extend is not a function - jquery - Stack Overflow

The problem is (as far as I can see from the source code), that the editor directly accesses the global $ (instead of...

@json-editor/json-editor | Yarn - Package Manager

Fast, reliable, and secure dependency management.

jsoneditor.min.js - Fisheye 4.8.5 - OpenLMIS

Listen for 'ready' event before setting the value";return this.root.setValue(a),this},validate:function(a){if(!this.ready)throw"JSON Editor not ready yet.

JSON Editor - Plunker

setValue(value); return this; }, validate: function(value) { if(!this.ready) throw "JSON Editor not ready yet. Listen for 'ready' event before validating"; ...

drupal-swagger-ui-formatter-support-swagger-ui-3.0-2958783 ...

+ + When we speak of free software, we are referring to freedom, not +price. ... AbstractTheme.extend({getRangeInput:function(a,b,c){return this.