Select2 4.0.5 common errors in Django admin - javascript

(Disclaimer: this is a self-answered question)
I wanted to set up some Select2 to my form fields while in a Django admin panel (specifically in the change_list.html template). So I added the neccesary scripts to the page (not the full version), but when it loads, I get this errors:
Select2: An instance of jQuery or a jQuery-compatible library was not found. Make
sure that you are including jQuery before Select2 on your web page.
TypeError: a is undefined
TypeError: e is undefined
TypeError: $ is not a function
And when you search for one of those errors (well, not the first and last ones), the answers aren't on the same subject (normally it has to do with a bad processResults setup, or problems with Bootstrap) or in the docs neither.
How can I fix it?

There are two steps involved fixing it:
Setting a var called $
This one is the first thing you think of when you see the last line (TypeError: $ is not a function), and all scripts normally use it (who doesn't uses $ in their scripts?). But when you modify it, you still get these errors:
TypeError: a is undefined
TypeError: e is undefined
So, we have to go deeper...
Setting a var called jQuery
This one can be a little hidden, as we have to dig into the select2.js script (you normally use the minified version, so only $ is showed instead).
Looks like a var called jQuery is used sometimes, so you also have to set it up in your JS.
How the fix should look like
Add this script before your Select2 scripts:
<script type="text/javascript">
// To prevent errors for Select2 JS
var $ = django.jQuery;
var jQuery = django.jQuery;
</script>

Related

Framework7 js Bundle disables the ajax Function

I am trying to migrate my app from plain HTML to framework 7, everything was going well until I noticed that the ajax requests were not being executed since they resulted in an error
Uncaught TypeError: $.ajax is not a function
at functionName (file.js:73:5)
at functionName (file.js:69:2)
at HTMLFormElement.<anonymous> (file.js:18:2)
I briefly know that the type error could occur mainly if jquery is not present in the project or when the slim version of Jquery is used which wasn't the case for my project
after some time hunting the cause of the issue, I found that whenever the file framework7-bundle.min.js is included ajax would stop working resulting in the above error, and would work if vice versa, is there a way to navigate through this issue?
after some trying to figure out the issue, I found that framework7 comes with its own Dom manipulator and uses the very symbol that jquery uses hence overriding all included jquery functionalities to fix this issue, I did comment on the line from where this Dom Manipulator is initialized.
The Dom Handler can be disabled by removing or commenting on the first line in app.js, this particular line var $ = Dom7;

Uncaught TypeError: Cannot read property 'tram' of undefined

I used webflow. Now there is a conflict when loading webflow.js.
What is the reason? How to fix?
http://s90009lu.beget.tech/teete/
https://i.stack.imgur.com/gx8sz.png
So even though the provided information is minimal i'm going to give it a shot:
As there is no actual sourcecode (code given seems to be packaged) i'm assuming this is some kind of a plugin. Which leads me to believe that this might not be the only case. Let just look at the exact error:
Uncaught TypeError: Cannot read property 'tram' of undefined
What this means is dat the browser tries to ook for a property called "tram" in an undefined variable. As undefined is something that is... wel... undefined. There can't be any properties. This produces this error.
A good practice to start of with some context might be just using a Google search of the exact problem. Let's search for "Uncaught TypeError: Cannot read property 'tram' of undefined".
Some results points up, al indicating stuff with webflow. Let's look at this result: https://forum.webflow.com/t/how-to-trigger-webflow-js-slider/11268.
The third post states that adding the line var $ = jQuery; got the user a step further. This provides some very clear context.
var $ = jQuery; assigns $ refer to the place in memory of the variable jQuery, a popular library. This basically creates an alias. Remarkable: $ tends to be a default (shipped) alias of jQuery. Something is off here.
Opening the browser (Chrome) developer tools shows the error shown in the screenshot. We can get some more precise information here by utilizing the debugger.
Open the devtools.
Click on a link to webflow.js to open it the sources tab.
Check the break on exceptions button (shaped like a stop sign).
Use the "{}" on the lower left to format the code.
Reload the page.
We can now see the code stop a certain point where it looks for tram. Just in front of that we see that it's looking in a newly created alias for window.$ (!).
The last thing makes to believe that indeed, jQuery is not properly installed. Either by the plugin or by a conflict in other modules. The suggested var $ = jQuery; line might work to fix this, but please keep in mind that jQuery should be made available first for this to work.
This last thing requires it to be bundled correctly or installed using a different method. As we don't know your exact situation you might need to look into this yourself.

Getting a Backbone.js fiddle working

I am stuck on a seemingly simple Backbone.js issue and would like to set up a fiddle to iteratively work through the problem. However... I can't seem to get the fiddle to load the scripts properly, or at least I am no using the correct "method".
Here is the link to the Jsfiddle
I've selected the following external sources, and provided each with links to the appropriate cdnjs sites.
However I'm still getting the following errors:
The firs tone deals with the Underscore.js library:
Message: Uncaught TypeError: Cannot read property 'each' of undefined - backbone.js:219
Code: _.each(listenMethods, function(implementation, method)
The second refers to my first Backbone declaration:
Message: Uncaught ReferenceError: Backbone is not defined - (index):47
Code: var QuoteHistory = Backbone.Model.extend(
You should at first load jQuery and Underscore and then the Backbone library. Also note that jQuery UI Bootstrap.js depend on jQuery, so the jQuery library should be loaded before these libraries; however, as you are loading jQuery in the "Frameworks & Extensions" panel you don't have to load it again manually.

Uncaught TypeError: undefined is not a function?

I am getting this error in Chrome's Developer Tools:
Uncaught TypeError: undefined is not a function
This error is referencing this line of my main.js file. These two lines are both causing this error to happen:
jQuery("#signupfrm").fadeToggle('fast',function(){
jQuery("#loginfrm").fadeToggle('fast',function(){
I am getting this error when working on the website on my local computer, but it's from a theme I purchased that has a demo available online.
Here's a working copy of this same template:
https://www.whmcsdesigns.com/demo/cart.php?a=add&pid=1&systpl=flex
Just select "I will use my existing domain and update my nameservers" and enter any domain name. You'll be taken to a page where personal info can be entered. You will see that you have the option to select between "New Customer" and "Existing Customer". It works at the link above.
However, on my local server it's not letting me switch between new and existing. It just gives the error show above and is referencing those lines with signupfrm and loginfrm.
I'm guessing since it's working on the link aboving, those functions must be defined. Can anyone else find where those are being defined at?
Things that I suspect to be the problem:
jQuery hasn't been loaded correctly so the jQuery function can't be performed. It might not have been loading at all or it might be called $, but if other calls to jQuery work it should be OK.
fadeToggle is a part of jQuery so I expect that to work if jQuery is loaded
jQuery("#signupfrm").fadeToggle('fast',function(){
sometimes if you load dynamically and you test on C:\ or whatever local path things don't work the same, especially AJAX calls. Set up a local webserver to work on always, just using localhost on a simple Apache is a good start

Can't get jstree working - "Uncaught TypeError: Object #<Object> has no method 'delegate'"

I'm trying to get the jstree plugin working, following the "Predefined HTML" example on this page: http://luban.danse.us/jazzclub/javascripts/jquery/jsTree/reference/_examples/1_datasources.html
To avoid any conflict with anything else that might be happening, i've tried to get it working in the simplest possible page, in my public dropbox folder: http://dl.dropbox.com/u/846812/jstree_example/jstree_example.html
The only js i've included in my page is jquery and the main jstree file, jsTree/jquery.jstree.js. (The documentation is a bit shaky about what exactly i need to include, but maybe this is the problem). The rest of the files i downloaded are next to jquery.jstree.js, in the jsTree folder.
I've also got my predefined html, a nested list in a div with id="folder_tree".
When the javascript runs, i get an error Uncaught TypeError: Object #<Object> has no method 'delegate', from line 3629 of the jquery.jstree.js file - hopefully you'll see this error too.
Can anyone have a look at the page (the dropbox link above) and see what i'm doing wrong? thanks, max
(note that the file links in that page don't work - they don't need to in order for jstree to work)
jQuery delegate is since version 1.4.2
You are using a older version of jQuery

Categories