ReferenceError: Can't find variable: JSONEditor

[thestick613]

• django-json-widget version: django-json-widget==0.2.0
• Django version: Django==2.2.3
• Python version: Python 3.7.3
• Operating System: Ubuntu

Added the app in INSTALLED_APPS Added the widget in the form If i refresh the admin page, i get

[Error] ReferenceError: Can't find variable: JSONEditor
	(anonymous function) (change:208)
	Global Code (change:211)
[Error] ReferenceError: Can't find variable: JSONEditor
	(anonymous function) (change:231)
	Global Code (change:234)

        var editor = new JSONEditor(container, options);
        var json = {"a": "b"};
        editor.set(json);

[jsmedmar]

Same problem here... Googling Uncaught ReferenceError: JSONEditor is not defined throws a bunch of github issues. Seems to be a problem with the underlying tool being used

[jsmedmar]

As for now, I managed to fix it with this:

from django_json_widget.widgets import JSONEditorWidget


class CustomJSONEditorWidget(JSONEditorWidget):
    # hardcode media until this issue gets resolved
    # https://github.com/jmrivas86/django-json-widget/issues/27
    class Media:
        extend = False
        css = {
            "all": (
                "https://cdnjs.cloudflare.com/ajax/libs/"
                "jsoneditor/7.0.4/jsoneditor.min.css",
                "https://cdnjs.cloudflare.com/ajax/libs/"
                "jsoneditor/7.0.4/img/jsoneditor-icons.svg",
            )
        }
        js = (  # pylint: disable=invalid-name
            "https://cdnjs.cloudflare.com/ajax/libs/"
            "jsoneditor/7.0.4/jsoneditor.min.js",
        )

[fedorbeets]

Using django-json-widget==1.0.1 Django==3.0.3 and Python 3.8.2

I still get the issue ReferenceError: JSONEditor is not defined. The above solution of creating a custom widget did not work for me.

I ofcourse added the app in INSTALLED_APPS and the widget to the form ala widgets = {'configuration': CustomJSONEditorWidget}

I had to add:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.13.2/jsoneditor.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.13.2/jsoneditor.min.css" type="text/css" media="all" rel="stylesheet">

To the top of the form.

Adding the django-json-widget to the admin interface does work without any adjustments. Does anyone have a fix that lets you use the normally included jsoneditor files in forms?

[daved-lacite]

I did a collectstatic to get the files in the static folder of the project, if you are running the server from apache, or from anything else than a runserver, the files need to be in the static folder in order to be served.

python manage.py collectstatic

[fedorbeets]

Once I did a collectstatic the issue didn't fix itself, but I included a local copy of the files that were collected in the page iwth the JSONEditor, and this solves the problem for now.

[ablakey]

All I had to do was a collectstatic given I'm using storages to put static assets in AWS. <-- Just a breadcrumb in case someone else comes looking for insight.

[berkcoker]

Make sure dist is not in your .gitignore since this library adds its static files into /static/dist