bindfields.js:14 Uncaught ReferenceError: chainedfk is not defined - Django Admin

chris-jones commented 6 years ago

Checklist

^{^{Put an x in the bracket when you have completed each task, like this: [x]}}

[x] This issue is not about installing previous versions of django-smart-selects older than 1.2.8. I understand that previous versions are insecure and will not receive any support whatsoever.
[x] I have verified that that issue exists against the master branch of django-smart-selects.
[x] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
[x] I have debugged the issue to the smart_selects app.
[x] I have reduced the issue to the simplest possible case.
[x] I have included all relevant sections of models.py, forms.py, and views.py with problems.
[x] I have used GitHub Flavored Markdown to style all of my posted code.

Error received within Google Chrome when loading Django admin page of a model with an inline model which uses smart-selects.

bindfields.js:14 Uncaught ReferenceError: chainedfk is not defined
    at initItem (bindfields.js:14)
    at HTMLSelectElement.<anonymous> (bindfields.js:35)
    at Function.each (jquery-2.2.0.js:360)
    at HTMLDocument.<anonymous> (bindfields.js:34)
    at fire (jquery-2.2.0.js:3182)
    at Object.fireWith [as resolveWith] (jquery-2.2.0.js:3312)
    at Function.ready (jquery-2.2.0.js:3531)
    at HTMLDocument.completed (jquery-2.2.0.js:3547)

Steps to reproduce

Environment:

Django 1.10.7
Latest build django-smart-selects
Jquery (2.2.0 / 2.2.3 / 2.2.4 / 3.3.1) (multiple versions tested)

Configured Django Instance as specified in the installation and configuration guides.
Smart Selects used on a Model, which is present as an InlineForm on another model Admin page
Load page

Actual behavior

Nothing. Error in Javascript prevents the code being actioned.

Expected behavior

Smart-selects should load two fields normally, and provide smart select functionality between them.

I actually removed all other Javascript references and inline javascript code from the HTML in order to check that there wasn't a conflicting code issue, but found nothing.

The script files are loaded in the correct order, none are 404-ing:

<script type="text/javascript" src="/admin/jsi18n/"></script>
 <script type="text/javascript" src="/static/admin/js/core.js"></script>
 <script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
 <script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
 <script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
 <script type="text/javascript" src="/static/admin/js/actions.js"></script>
 <script type="text/javascript" src="/static/admin/js/urlify.js"></script>
 <script type="text/javascript" src="/static/admin/js/prepopulate.js"></script>
 <script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.js"></script>

 <script type="text/javascript" src="/static/smart-selects/admin/js/chainedfk.js"></script>
 <script type="text/javascript" src="/static/smart-selects/admin/js/bindfields.js"></script>

 <script type="text/javascript" src="/static/admin/js/calendar.js"></script>
 <script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"></script>

Can't for the life of me see what's wrong. I think the error being thrown-up might be misleading somehow? I even combined the smart-select Javascript together, so that there would be no scope issues.

nazrow commented 6 years ago

+1, experiencing the exact same thing. Neither chainedfk nor chainedm2m work where they should (I have chained fields of both types in like a dozen different models). Respective .js files are loaded from the same /static/smart-selects/admin/js folder where bindfields.js resides, yet console shows the functions are not defined.

I've tried cleaning up chainedm2m.js removing all the things I don't understand and leaving it just like this: function chainedm2m() { ... } Now the browser is able to find chainedm2m, but tells me that chainedm2m.init is not a function. Same goes for chainedfk.

nazrow commented 6 years ago

Aaaand it works now. I have no idea why chainedm2m.js and chainedfk.js are written the way they are, and I intend to continue to keep away from JavaScript for as long as possible, but for now I got it to work properly by editing chainedm2m.js this way:

var chainedm2m = {
    fireEvent: function (element, event) { ... },
    dismissRelatedLookupPopup: function(win, chosenId) { ... },
    fill_field: function (val, initial_value, elem_id, url, initial_parent, auto_choose) { ... },
    init: function (chainfield, url, id, value, auto_choose) { ... }
};

{ ... }s mean that I changed nothing within the actual methods themselves.

Same goes, again, for chainedfk.

since it works without "use strict", I guess it's irrelevant here;
chainedfk and chainedm2m are no functions by themselves but mere containers for their methods, so may be defined as var name = { method: definition, ... };
I barely understand all that JS scope thing and don't want to dive deeper, but written clean it works, and decorated with (function ($) { (function chainedfk(){ ... }()); } it doesn't.

GrilloLuca commented 6 years ago

Hi, just tried the same exact thing and it workd for me too but with var chainedfk =


var chainedfk = {

        fireEvent: function (element, event) { ... },
        dismissRelatedLookupPopup: function (win, chosenId) { ... },
        fill_field: function (val, init_value, elem_id, url, empty_label, auto_choose) { ... },
        init: function (chainfield, url, id, init_value, empty_label, auto_choose) { ... }
};

mfaulkner9294 commented 6 years ago

I'm also experiencing this issue...

christianalcantara commented 6 years ago

Solution: https://github.com/RafaDias/django-smart-selects/commit/61f182f4e56fa7f7eb1ca2fbf0fb922bb25c8a0e

ShubhamSarda commented 6 years ago

Thanks it actually help to remove Error "bindfields.js:14 Uncaught ReferenceError: chainedfk is not defined - Django Admin", but now have constant error TypeError: $ is not a function, since we removed it as function.

blag commented 6 years ago

Hi everybody, I think I fixed this in the js-unlinting-fixes branch. If you are still having the issue, can you try that and tell me if it works?

You should be able to install that branch using pip:

pip install git+https://github.com/digi604/django-smart-selects.git@js-unlinting-fixes