search

pallets-eco / flask-debugtoolbar

A toolbar overlay for debugging Flask applications
https://flask-debugtoolbar.readthedocs.io
BSD 3-Clause "New" or "Revised" License
953 stars 146 forks source link

Conflicting jqueries...? #123

Open stratosgear opened 6 years ago

stratosgear commented 6 years ago

I have weird issue

I get:

jquery.js:3818 jQuery.Deferred exception: $ is not a function TypeError: $ is not a function
    at HTMLDocument.<anonymous> (http://localhost:5000/celery:222:5)
    at mightThrow (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js:3534:29)
    at process (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js:3602:12) undefined
jQuery.Deferred.exceptionHook @ jquery.js:3818
process @ jquery.js:3606
setTimeout (async)
(anonymous) @ jquery.js:3640
fire @ jquery.js:3268
fireWith @ jquery.js:3398
fire @ jquery.js:3406
fire @ jquery.js:3268
fireWith @ jquery.js:3398
ready @ jquery.js:3878
completed @ jquery.js:3888
jquery.js:3827 Uncaught TypeError: $ is not a function
    at HTMLDocument.<anonymous> (celery:222)
    at mightThrow (jquery.js:3534)
    at process (jquery.js:3602)
(anonymous) @ celery:222
mightThrow @ jquery.js:3534
process @ jquery.js:3602
setTimeout (async)
jQuery.readyException @ jquery.js:3826
(anonymous) @ jquery.js:3846
mightThrow @ jquery.js:3534
process @ jquery.js:3602
setTimeout (async)
(anonymous) @ jquery.js:3640
fire @ jquery.js:3268
fireWith @ jquery.js:3398
fire @ jquery.js:3406
fire @ jquery.js:3268
fireWith @ jquery.js:3398
process @ jquery.js:3622
setTimeout (async)
(anonymous) @ jquery.js:3640
fire @ jquery.js:3268
fireWith @ jquery.js:3398
fire @ jquery.js:3406
fire @ jquery.js:3268
fireWith @ jquery.js:3398
ready @ jquery.js:3878
completed @ jquery.js:3888!!
ng:

when I load:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

at the bottom of my base layout page ( I have to have my own jquery so I can load bootstrap etc)

That line is a simple:

$j( document ).ready(function() {
    console.log("started");
 });

On the html page source of my rendered page I see that debugtoolbar renders after my page and one of the first things it does it to load it's own version of jquery.

If I disable debugtoolbar, then everything is working correctly.

Only way to make it work (with debugtoolbar active) is if I run:

<script>var $j = jQuery.noConflict();</script>

right after I load my jquery and from there on, I use $j instead of $, which is a pain as I'm not used to it.

Is it how everyone is using jquery alongside with debugtoolbar...?

tony commented 6 years ago

I'm a little confused as to why this happens, since we're using noConflict(true).

I kind of wish something like this was accepted: https://github.com/mgood/flask-debugtoolbar/pull/59

Another thing that'd be a sensible choice is overriding the template. Since this is a debug tool, it's not always going to be added to a perfect codebase. So having things like that able to toggle from the get-go may be helpful.

I'd do a PR, but #59 was closed for some reason?

Edit:

By the way, update on the above, the reason my flask-debugtoolbar was breaking was due to https://github.com/MongoEngine/flask-mongoengine.

In flask_mongoengine/templates/panels/mongo-panel.html#L170, noConflict(true) would knock $ off.

So in reality, I don't think my issue above applies as much. :P Maybe it'd be helpful to still allow an approach used in #59, but in my situation, it was a plugin for this, not the toolbar itself.