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

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

• javascript
• django

• The error you're seeing is Javascript related. It looks like you haven't loaded the proper libraries to be able to call chainedfk. – SaeX Commented Feb 11, 2016 at 11:59
• I understand it but I don't understand what can I do. I think that chainedfk.js should be loaded automatically – Oleg Commented Feb 11, 2016 at 12:15
• Well, show us the template/HTML where you're including the smart-select libraries? – SaeX Commented Feb 11, 2016 at 12:56
• 1 @Oleg. Edit the question and add the relevant code there. It's much easier to read code with linebreaks. – Håken Lid Commented Feb 11, 2016 at 13:23
• 1 And check the rendered html output to see if the javascript file is linked. – Håken Lid Commented Feb 11, 2016 at 13:25

5 Answers 5

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 :)

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>

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>

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

<script src="https://ajax.googleapis./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>

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