Jazzmin - JS issues with crispy forms & datatables

[rouxxx]

First, Thank you for Jazzmin, your package is excellent !

I am a bit confused on JS issues on two things :

• when I add crispy-forms to my change_form, I get errors on select2 Select2: An instance of jQuery or a jQuery-compatible library was not found.
• I also try to add datatables on change_form but it ends having $ is not a function or datatables is not a function

I might miss something obvious but I am completely stuck and I really want to be able to use Jazzmin.

Project is quite new, no extra packages installed.

Select2 is used by having JazzminSelect as a widget in my forms.

Django 3.2 Jazzmin 2.4.9 Crispy Forms 1.13

[farridav]

Are you able to change the source code of the installed jazzmin package to test something out?

diff --git a/jazzmin/templates/admin/base.html b/jazzmin/templates/admin/base.html
index 845d766..98a6e78 100644
--- a/jazzmin/templates/admin/base.html
+++ b/jazzmin/templates/admin/base.html
@@ -360,6 +360,7 @@
 
 <!-- jQuery -->
 <script src="{% static "admin/js/vendor/jquery/jquery.js" %}"></script>
+<script>$.noConflict();</script>
 <!-- Bootstrap 4 -->
 <script src="{% static "vendor/bootstrap/js/bootstrap.min.js" %}"></script>
 <!-- AdminLTE App -->
diff --git a/jazzmin/templates/admin/login.html b/jazzmin/templates/admin/login.html
index 10e0f58..4511061 100644
--- a/jazzmin/templates/admin/login.html
+++ b/jazzmin/templates/admin/login.html
@@ -122,6 +122,7 @@
 
 <!-- jQuery -->
 <script src="{% static "admin/js/vendor/jquery/jquery.js" %}"></script>
+<script>$.noConflict();</script>
 <!-- Bootstrap 4 -->
 <script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
 <!-- AdminLTE App -->

I'm wondering if using noConflict would solve your problems, if so, i can add it to the codebase, but you testing it out, saves me needing to setup crispy forms

[rouxxx]

Hi,

Thanks I will test it.

However, I found a solution by putting the declaration of jquery in the header of base.html (I forgot to post the hint sorry for that).

It appears that the jquery declaration came after the display of some Html includes in my pages. The $ was available in console once page was loaded. After moving jQuery declaration into header, no more errors on select2 and I was able to initialize Datatables in those html includes I talked about.

I let you know about my tests and if you think about any problem by putting jQuery in header, just tell me (did not cross any problem so far).

[rouxxx]

I tested it, no changes.

From my understanding, the js is loaded after all the other content? So if the content needs it itself, an error is raised.

The solution I talked above looks good for now