openwisp / openwisp/django-flat-json-widget

Doesn't work outside of django admin?

Open
#20 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Python
Stars
71
Forks
27
Avg merge
1h 8m
Merged PRs (30d)
6

Description

This widget looks very useful and exactly what I'm looking for, thank you for sharing this!

Trying it out I ran into some trouble and wasn't able to get it working outside of django admin.

I have something like:

class MyModel(models.Model):
    extra_json = models.JSONField()

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        fields = ["extra_json"]
        widgets = {
            'extra_json': FlatJsonWidget,
        }

class MyView(CreateView):
    model = MyModel
    form_class = MyForm
    template_name = "my_template.html"

And my template looks something like:

{% load crispy_forms_tags %}

<form method="post" class="my-class">
    {{ form | crispy }}
</form>

When rendering this the first error I had was Uncaught ReferenceError: django is not defined, this seemed similar to this issue on another project: https://github.com/jazzband/django-tinymce/issues/124

Adding the following to my template fixed this first issue, (not sure if it's normal I have to add this.)

<script
  src="https://code.jquery.com/jquery-3.6.1.slim.min.js"
  integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA="
  crossorigin="anonymous"></script>
<script src="{% static 'admin/js/jquery.init.js' %}"></script>

Next I was getting Uncaught ReferenceError: initJsonKeyValueWidget is not defined, I figured out I had to load some more scripts:

I ended up with:

<link href="{% static 'flat-json-widget/css/flat-json-widget.css' %}" rel="stylesheet">

<script
  src="https://code.jquery.com/jquery-3.6.1.slim.min.js"
  integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA="
  crossorigin="anonymous"></script>

<script src="{% static 'admin/js/jquery.init.js' %}"></script>
<script src="{% static 'flat-json-widget/js/lib/underscore.js' %}"></script>
<script src="{% static 'flat-json-widget/js/flat-json-widget.js' %}"></script>

At this point I don't see anymore errors in the console, I do not see the original text area anymore, but I do not see the editor either. I'm not sure how to get this to work.

I suspect this is not made to work outside the django admin, if that's the case it would be cool to but that in the README ;-)

Best,

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue using MyForm, MyView, the shown template, and the FlatJsonWidget static assets. Start by checking how the widget's JavaScript and CSS are loaded outside django admin, then review the README for documented usage. Done means the editor renders and works in the supplied CreateView form, or the README clearly documents that only django admin is supported.

Written by the indexing model from the issue text.

Assessment

Tech stack
django, jquery, python
Domain
backend, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.