Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doesn't work outside of django admin? #20

Open
wapiflapi opened this issue Oct 19, 2022 · 2 comments
Open

Doesn't work outside of django admin? #20

wapiflapi opened this issue Oct 19, 2022 · 2 comments

Comments

@wapiflapi
Copy link

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: jazzband/django-tinymce#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
Copy link
Author

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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants