Comments (14)
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.
@c3959 see #17
for solution.
Thanks to @andytwoods for the assistance.
from taggit-selectize.
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.
works in the user's frontend. Didn't need to change anything!
from taggit-selectize.
@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.
afraid I moved to taggit. Indeed, I am pondering whether to move from taggit to ArrayField!
from taggit-selectize.
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.
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.
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.
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.
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.
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.
@aventrax FYI, I released latest from master.
pip install taggit-selectize==2.6.0
from taggit-selectize.
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)
- Items should split if not in quotes HOT 3
- Order by length of tag name HOT 3
- with DRF HOT 1
- Does this only work in admin ? HOT 10
- Safari form submission broken HOT 1
- Update selectize.js to latest version HOT 2
- Is the Example App Compatible with Django 2.1.5? HOT 1
- Incompatible with django-taggit 1.0
- ModuleNotFoundError: No module named 'taggit-selectize' HOT 2
- Django 3.0 support HOT 2
- put jQuery in top of base_site.html
- Uncaught TypeError: $(...).selectize is not a function
- Make taggit-selectize responsive and add a new tag with comma (on mobile)
- Using taggit-selectize with django 3
- close_after_select config value
- RemovedInDjango40Warning: force_text() is deprecated in favor of force_str(). HOT 1
- RemovedInDjango40Warning: django.conf.urls.url() is deprecated in favor of django.urls.re_path() HOT 1
- Theming support
- Example app does not contain sample template
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from taggit-selectize.