GithubHelp home page GithubHelp logo

Comments (10)

brianbola90 avatar brianbola90 commented on June 26, 2024
from taggit_selectize import widgets as tag_widget

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['title', 'text', 'tags', 'publish']
        widgets = {'title': forms.TextInput(attrs={'class': 'col-md-5 form-control', 'placeholder': 'Title'}),
                   'text': forms.Textarea(),
                   'tags': tag_widget.TagSelectize(attrs={'class': 'col-md-5', 'placeholder': 'Tags'}),
                   'publish': forms.CheckboxInput(attrs={'label': 'publish'})}```

from taggit-selectize.

brianbola90 avatar brianbola90 commented on June 26, 2024

Fix above import the widget from taggit_selectize and use it in your form

make sure jquery is at the top of your html template.

from taggit-selectize.

uditvashisht avatar uditvashisht commented on June 26, 2024

Hi, I have changed the form and I have also added the js and css files manually. Css in the head and js at the bottom just above the . I am still not able to use it outside the admin.

from taggit-selectize.

andytwoods avatar andytwoods commented on June 26, 2024

I detailed an example on stackoverflow recently that might help https://stackoverflow.com/a/51464694/960471

from taggit-selectize.

uditvashisht avatar uditvashisht commented on June 26, 2024

@andytwoods Yes, I have gone through that multiple times. But since I am new to Django and Python few things there were complex for me . Let me explain you what I am doing.
I have a blog application and I have added this in my models.py

tags = TaggableManager()

I have added this in class Meta of my post form

widgets = {'tags': tag_widget.TagSelectize()}

I have added the JS and CSS manually in my template. It still doens't work for me. Is there anything I can do apart from all this ?

from taggit-selectize.

andytwoods avatar andytwoods commented on June 26, 2024

I think Stackoverflow is a better place for this conversation.

But check to see if you have JS errors (via browser console). I suspect js ajax is not reaching your backend (urls.py needs configuring).

from taggit-selectize.

uditvashisht avatar uditvashisht commented on June 26, 2024

@andytwoods Yes, I have configured my urls.
I don't have enough reputation on stack so I couldn't comment on your post . However I have posted a question https://stackoverflow.com/questions/51844921/use-taggit-selectize-in-django-to-autocomplete-the-tags-in-user-form-outside-the . You can reply on this so that we can follow the conversation.

Also one more thing, I am using Martor Editor for the text of article, which uses semantic.js and the tags are on the same page. semantic.js has messed up my other JS. So, now I am loading them only in the Post Create form but selectize.js also loads on the same page. Could it be a reason ?

from taggit-selectize.

brianbola90 avatar brianbola90 commented on June 26, 2024

Have you tried commenting out semantic.js qnd changing the order of them in the template

from taggit-selectize.

uditvashisht avatar uditvashisht commented on June 26, 2024

@brianbola90 Hi yes, I just tried it it didn't work even after commenting out semantic.js. I have tried loading the selectize.js almost everywhere in the template (even in the head), right now I am loading it just under the jquery and above popup, bootstrap etc.

from taggit-selectize.

andreasnuesslein avatar andreasnuesslein commented on June 26, 2024

I'm pretty sure the problem comes from jquery not being loaded soon enough, throwing a

})(jQuery || django.jQuery); X
   ^
Uncaught ReferenceError: jQuery is not defined

Try and put your <script src="{% static 'vendor/js/jquery-3.3.1.min.js' %}"></script> into the <head>.

from taggit-selectize.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.