openwisp / django-flat-json-widget

Flat JSON widget for django, used and maintained by the OpenWISP project.
http://openwisp.org
BSD 3-Clause "New" or "Revised" License
64 stars 15 forks source link

Doesn't work outside of django admin? #20

Open wapiflapi opened 2 years ago

wapiflapi commented 2 years ago

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,

wapiflapi commented 2 years ago

I figured out I could do {{ form.media }} in my template which I think basically does what I did manually after a lot of effort ...

But that still leaves me with nothing being shown, same result as at the end of my bost above.

nemesifier commented 2 years ago

The widget is designed primarily for admin use, if you need it in non-admin templates you will have to do more work to get it working.