How to use calendar with jQuery and theme with other jQuery

Question

I have a theme that uses jQuery v3.5.1 and I want to use a calendar that also uses jQuery but other form.

Base page:

<script src="{% static 'assets/vendor/jquery/jquery.min.js' %}"></script>

Page that extends base:

{% extends 'main/base.html' %}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>

How can I make this work ? If I remove the second page's dependency then the calendar will work but the style of the theme not obviously.

I've tried this solutions but didn't work: Can I use multiple versions of jQuery on the same page?

Can anyone give me a hint?

Error from Dev. Tools console:

jquery-3.3.1.slim.min.js:2 Uncaught TypeError: $(...).datetimepicker is not a function

at HTMLDocument. ((index):372)
at l (jquery-3.3.1.slim.min.js:2)
at c (jquery-3.3.1.slim.min.js:2)

You don't need the slim version, calendar should work fine with your theme version. Just include the calendar script without adding another jQuery — charlietfl, Jul 05 '20 at 15:32
Tried it but the calendar doesn't work maybe becase the theme uses another version of jQuery 3.5.1 vs 3.3.1 — cristian, Jul 05 '20 at 15:40
Doubt that is the problem, version differences are probably minuscule. What errors do you see in browser dev tools console? I don't know django....does the calendar script get inserted before the theme version of jQuery.js within the page? — charlietfl, Jul 05 '20 at 15:47
I added the error message in the question. I think it gets after. — cristian, Jul 05 '20 at 15:56
But that is with the slim version included. What is error when it is not included? — charlietfl, Jul 05 '20 at 16:01
Yes, that was the error when both are included. When calendar's jQuery is not included I get: `jquery.datetimepicker.full.min.js:1 Uncaught ReferenceError: jQuery is not defined at jquery.datetimepicker.full.min.js:1 at jquery.datetimepicker.full.min.js:1` — cristian, Jul 05 '20 at 16:06
So theme is probably putting the jQuery script tag at end of body for best practices of loading scripts and you are probably putting your script in middle of body. Can you extend the page scripts themselves in django to account for dependencies like this? Script loading order is important when one depends on another — charlietfl, Jul 05 '20 at 16:08
Yes for the first part and I was putting it at the end of header tag. I tried and put it at the end of the body and I get only this now: `Uncaught ReferenceError: $ is not defined` — cristian, Jul 05 '20 at 16:28
Try wrappung your written code in `(function($){ /* your code */})(jQuery)` — charlietfl, Jul 05 '20 at 16:31
OMG ! Instead of $(function (){...}) I used what you said `(function($){...})(jQuery)` and it worked! Why ? :) — cristian, Jul 05 '20 at 16:40
OK you still need the `$(function ()` also since it is for `document ready`. The theme is probably using `jQuery.noConflict()` which makes the global `$` unavailable to prevent collison with other libraries that use $. I used an IIFE to pass in jQuery object and allow using `$` as jQuery inside it See https://api.jquery.com/jQuery.noConflict/ — charlietfl, Jul 05 '20 at 16:43

score 0 · Accepted Answer · answered Jul 05 '20 at 18:37

0

Wrap code between (function($){...})(jQuery):

(function($){
  $(function(){
    $("#id_date").datetimepicker({
      format: 'd - m - Y H:i',
      inline:true,
    });
  });
})(jQuery)

answered Jul 05 '20 at 18:37

cristian

518
5
20

How to use calendar with jQuery and theme with other jQuery

1 Answers1