GithubHelp home page GithubHelp logo

Comments (14)

jmpark6846 avatar jmpark6846 commented on June 26, 2024 3

I had this problem and thanks to @andytwoods I solved it somehow
(I looked through this chat -
https://chat.stackoverflow.com/rooms/176541/discussion-between-andyw-and-sandor-des)

I'm using taggit-selectize in form
This is what my head tag looks like.

<head>
...
  {% block css %}
  <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
  {% endblock %}
  {% block javscript %}
    <script src="{% static 'jquery.min.js' %}"></script>
    <script src="{% static 'umd/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
  {% endblock %}
  {% block static %}{% endblock %}
...
</head>

and added this code at the bottom of the form page

{% block javascript %}   
  {{ block.super }}  
  <script type="text/javascript" src="/static/taggit_selectize/js/selectize.js"></script> 
{% endblock %}  
{% block css %}   
  {{ block.super }}   
  <link href="/static/taggit_selectize/css/selectize.django.css" type="text/css" media="all" rel="stylesheet"/> 
{% endblock %}

and it worked!

this is my model

from taggit_selectize.managers import TaggableManager

class Document(models.Model):
  ...
  tags = TaggableManager(verbose_name='태그', blank=True)

and this is my form

from taggit_selectize.widgets import TagSelectize

class DocumentForm(forms.ModelForm):

  class Meta:
    widgets = {
    ...
      'tags': TagSelectize(attrs={'placeholder': '태그'}),
    }

FYI
Django 2.1
django-taggit 0.23.0
taggit-selectize 2.6.0
"jquery": "^3.3.1"

hope it helps

from taggit-selectize.

brianbola90 avatar brianbola90 commented on June 26, 2024 1

@c3959 see #17
for solution.
Thanks to @andytwoods for the assistance.

from taggit-selectize.

c3959 avatar c3959 commented on June 26, 2024 1

thanks guys for your guide. has a solution as explained by @andytwoods.
I did it by passing the form data to the context of the template.

{% block css %}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
{{ form_media }}

{% endblock css %}

but this patch solution I do not like at all. Now I have two jquery, one in the header and one in the end of the template.
I think the problem goes through the input tag script:

Tags
        <script type="text/javascript">
            (function($) {
                $(document).ready(function() {
                    $("input[id=id_tags]").selectize({
                        valueField: 'name',
                        labelField: 'name',
                        searchField: 'name',
                        diacritics: true,
                        create: true,
                        persist: true,
                        openOnFocus: true,
                        hideSelected: true,
                        closeAfterSelect: true,
                        loadThrottle: 300,
                        preload: false,
                        addPrecedence: false,
                        selectOnTab: false,
                        delimiter: ',',
                        plugins: [],
                        render: {
                            option: function(item, escape) {
                                return '<div>' +
                                    '<span class="title">' +
                                        '<span class="name">' + escape(item.name) + '</span>' +
                                    '</span>' +
                                '</div>';
                            },
                            'item': function(item, escape) {
                                name = item.name.replace(/^\s*"|"\s*$/g, '');
                                return '<div class="item">' + escape(name) + '</div>';
                            }
                        },
                        load: function(query, callback) {
                            if (query.length < 2) return callback();
                            $.ajax({
                                url: '/taggit/?query=' + encodeURIComponent(query),
                                type: 'GET',
                                error: function() {
                                    callback();
                                },
                                success: function(res) {
                                    callback(res.tags.slice(0, 10));
                                }
                            });
                        }
                    }).parents('.form-row').css('overflow', 'visible');
                });
            })(jQuery || django.jQuery);
        </script>
    
                </div>

This script is executed when loading the page, so it asks that the libraries be loaded before in the header. would not it be better to load libraries and then load that script when using the input? or load it after jquery at the end of the document?

from taggit-selectize.

andytwoods avatar andytwoods commented on June 26, 2024

works in the user's frontend. Didn't need to change anything!

from taggit-selectize.

brianbola90 avatar brianbola90 commented on June 26, 2024

@andytwoods what version of django are you using and version of selectize? did you need to include any tags in html template ?

from taggit-selectize.

andytwoods avatar andytwoods commented on June 26, 2024

afraid I moved to taggit. Indeed, I am pondering whether to move from taggit to ArrayField!

from taggit-selectize.

c3959 avatar c3959 commented on June 26, 2024

I am using django 1.11.5 and taggit selectize 2.4.0. this message is from the browser console:

jQuery.Deferred exception: $(...).selectize is not a function TypeError: $(...).selectize is not a function
at HTMLDocument.

I think it's because jquery is not loaded. this is without modifying anything as recommended above or importing anything in the template. jquery was also tried from the header of the document. jquery is loaded for other script and is available in the console.

from taggit-selectize.

andytwoods avatar andytwoods commented on June 26, 2024

I had this exact issue yesterday. I was using the widget in a django-filter, and a js and css file were not added to the page. I manually added these and it worked:

{% block javascript %}
  {{ block.super }}
  <script type="text/javascript" src="/static/taggit_selectize/js/selectize.js"></script>
{% endblock %}

{% block css %}
  {{ block.super }}
  <link href="/static/taggit_selectize/css/selectize.django.css" type="text/css" media="all" rel="stylesheet"/>
{% endblock %}

from taggit-selectize.

andytwoods avatar andytwoods commented on June 26, 2024

That script waits for the page to load? Via $(document).ready(function() ...
Although it might be wise to use a pure JS way to detect when all the libraries are loaded, including jquery. E.g.
document.addEventListener("DOMContentLoaded", function(event){
// your code here
});

from taggit-selectize.

andytwoods avatar andytwoods commented on June 26, 2024

OK, I tried swapping out $(document).ready(function() { with document.addEventListener("DOMContentLoaded", function(event){ (and loading jquery outside of the HEAD) but there's a whole lot of code within selectize.js that now complains about there being no Jquery. Seems best to load jquery in the HEAD and not to bother swapping those 'detect when everything is loaded' listeners.

from taggit-selectize.

uditvashisht avatar uditvashisht commented on June 26, 2024

Could anyone use it outside the admin ? I have tried almost all the methods here and on #17 but couldn't do it.

from taggit-selectize.

aventrax avatar aventrax commented on June 26, 2024

Yes, I have it working on a form (django 2.1, taggit, bootstrap 4):

  • Installed taggit-selectize with pip install git+https://github.com/chhantyal/taggit-selectize.git@4cca119f9f0839bdc6bbe9fd0e4fe927f6949a3a (this is only required with Django 2.1, otherwise the pip install taggit-selectize is enough) - Then I followed the instructions on the README.md of this repository
  • myproject/myproject/urls.py: path('taggit/', include('taggit_selectize.urls')) - (curl http://localhost:8000/taggit/?query=mytag must be working)
  • Replaced TaggableManager with the version from this package on my models.py
  • On forms.py (on my ModelForm) I added the widget:
from taggit_selectize import widgets as tag_widget

class PolicyForm(forms.ModelForm):

    class Meta:
        model = Policy

        fields = [
            'name', 'type', 'tags'
        ]

        widgets = {
            'tags': tag_widget.TagSelectize(attrs={'placeholder': 'Tags'}),
        }
  • Loaded jQuery on head, selectize.js and selectize.django.css on the button of the page.
  • Loaded selectize.js and selectize.django.css on the form page
  • My django generic class based view is working without any issue!

from taggit-selectize.

chhantyal avatar chhantyal commented on June 26, 2024

@aventrax FYI, I released latest from master.

pip install taggit-selectize==2.6.0

from taggit-selectize.

adhg avatar adhg commented on June 26, 2024

credits to @jmpark6846 for me I only had to add the below 2 lines and it worked!

<script type="text/javascript" src="/static/taggit_selectize/js/selectize.js"></script>

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.