django-debug-toolbar Not Working with jQuery in Django Web Site

Question

I'm using django-debug-toolbar (newest version, v1.2.1) and I keep getting this error in the console:

Empty string passed to getElementById()

For this bit of code in jQuery (line 2757):

...
// HANDLE: $(#id)
} else {
elem = document.getElementById( match[2] );
...

Each link in the debug toolbar I click gives another occurrence of this warning.

When I comment out my main jQuery source file, debug toolbar works. Also, in the Django admin, it works fine, presumably because the Django admin uses a different method of fetching jQuery.

I tried @Carlton Gibson's answer but this doesn't solve my problem. I also have tried local jQuery and from a CDN and a few different versions to no avail...

I have tried different versions of jQuery and using all the possible settings offered in the docs of django-debug-toolbar. I'm stuck and I really like this tool and want it to work for me.

EDIT

Since I have received some additional comments and answers, I thought I'd make an edit to explain what I've tried. I tried all suggestions without success. However, currently, I'm seeing another error that I recognize from another post about RequireJS and django-debug-toolbar:

GET http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js [HTTP/1.1 304 Not Modified 133ms]
ReferenceError: jQuery is not defined localhost:8000:119
TypeError: djdt is undefined toolbar.js:297
Empty string passed to getElementById()

Even though jQuery is loaded and I'm telling django-debug-toolbar to use my version (with DEBUG_TOOLBAR_CONFIG = { 'JQUERY_URL': '', }), I'm still getting the errors and DjDT isn't working. This time, it's not even showing up because of the TypeError.

EDIT

Here is the chunk of base.html where the JS is imported. Keep in mind that this a snapshot and it has changed quite a bit.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" defer></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" defer></script>

I also have a back to top widget I'm using that might be the culprit. Since I've been using this code for so long, I never thought it was a problem but now I suspect it might be. Also, since the error was related to id and the script uses class I dismissed it. But when I comment it out, the DjDT works.

With the help of the posts herein, I got this issue resolved. Not sure how it relates to the id, but I had a conflict in a back to top widget I'm using with an a selector. I changed to the class and it's working. I tested in two projects and it seems to be fixed. Thanks for all the help!

Answer 1

Since you've already got jQuery on the page you can tell the debug toolbar not to load it's version. Try adding this to your settings:

DEBUG_TOOLBAR_CONFIG = {
  'JQUERY_URL':'',
}

(See the config docs for a little more.)

Hopefully that's enough to solve your issue.

Answer 2

Not sure if this will work for you, but taking cue from this answer, try adding the following to your settings.py and see if it works

def show_toolbar(request):
    return True
SHOW_TOOLBAR_CALLBACK = show_toolbar

That will effectively remove all checks by debug toolbar to determine if it should or should not load itself; it will always just load.

Since you mention in the comment that you are importing jquery at the bottom of the </body> tag, make sure that all your tags a closed; there might be a missing tag in your template. Also, if you are putting the jquery script tag at the bottom for performance sakes, you can look into using async or defer.

Edit 1 : More suggestions based on comments

Are you using any extensions for Firefox or chrome etc? Check this. Also, make sure that if you are querying by '#' selector -- insure the selector is unique (as it should be) or you will end up with this error in FireFox.

My guess would be, that you have an element in your html with some id, which is used within the templates for the django-debug toolbar as well, and you are querying it with # selector.