CODEWITHSUNDEEP
javascriptdjango
Oleg
Oleg

Reputation: 847

django-smart-selects doesn't work in templates

I have a problem with django-smart-selects usage. In the admin panel, django-smart-selects works correctlyn but in templates there is an error.

Uncaught ReferenceError: chainedfk is not defined

$(document).ready(function() {
            chainedfk.init(chainfield, url, id, value, empty_label, auto_choose);
});

Mt urls:

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^chaining/', include('smart_selects.urls')),
    url(r'^$', 'avtocry.views.index'),
    url(r'^/', include('advdesk.urls')),
    url(r'^createadv/', 'advdesk.views.createadv',name='createadv')
]

tamplate file

 {% extends 'base.html' %}

 {% block content %}

    <div class="wrapper">
    <form action='{% url 'createadv' %}' method="post">
        {% csrf_token %}
       {{ form }}
        <input type="submit" value="OK">
    </form>
    </div>

{% endblock %}

base file contais

<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>

html output

template

admin

Upvotes: 3

Views: 2979

Answers (5)

Emmanuel Chamilakis
Emmanuel Chamilakis

Reputation: 559

Worked for me by putting {{form.media.js}} which loads the required javascripts in the head. so:

{% block headjavascript %}{{ form.media.js }}{% endblock %}

Which is a better practice for loading javascript

Upvotes: 0

dungu
dungu

Reputation: 125

UPDATE - MAY- 2017

Sorry, things have a bit changed as of now, my form also refused to load and yet it was loading some time back, so you have to include the tag below, right after the jquery and the tag that contains chainedfk.js

This works very well both for django 1.10.5 and Django 1.11 -(the latest version as of this writting) - Python 3.5.2

<script type="text/javascript" src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
<script type="text/javascript" src="{% static 'smart-selects/admin/js/chainedm2m.js' %}"></script>
<script type="text/javascript" src="{% static 'smart-selects/admin/js/bindfields.js' %}"></script>

Upvotes: 2

George
George

Reputation: 169

to be 100% correct you have to import file with this specific order:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js </script>
<!-- Smart select -->
<script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
<script src="{% static 'smart-selects/admin/js/chainedm2m.js' %}"></script>

Upvotes: 0

George
George

Reputation: 169

I had the same problem but without receiving any error. it worked for me too when I included: 

<script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>

Upvotes: 0

Lantern
Lantern

Reputation: 433

Here's how I solved this, for some reason unknown to me, a file called chainedfk.js is missing. After a little digging I found that this file exists in this path 'smart-selects/admin/js/chainedfk.js' in the library files. So I simply added this import line my base.html file.

*I removed the tags so it can be visible.

script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"

after the js import line and it worked like a charm :)

Upvotes: 6

Related Questions