Django Admin and third party Javascript

Question

I am running django 2.0, which has jquery 2.2.3. I want to utilize this ImageViewer Javascript app https://github.com/s-yadav/ImageViewer with one of my admin pages. I added the js files and css file to the Media class within my ModelAdmin class, and collected all the static files. The files are loaded on the web page. I am following the app's example for Image Mode ( http://ignitersworld.com/lab/imageViewer.html )

The page loads, but there is an error in the js console:

    imageviewer.js:16 Uncaught TypeError: $ is not a function
    at imageviewer.js:16
    at imageviewer.js:789
(anonymous) @ imageviewer.js:16
(anonymous) @ imageviewer.js:789

The first few lines of the ImageViewer script - line 16 is the one with 'body'

    /*
    ImageViewer v 1.1.3
    Author: Sudhanshu Yadav
    Copyright (c) 2015-2016 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
    Demo on: http://ignitersworld.com/lab/imageViewer.html
*/

/*** picture view plugin ****/
(function ($, window, document, undefined) {
    "use strict";

    //an empty function
    var noop = function () {};

    var $body = $('body'),
        $window = $(window),
        $document = $(document);

The last line of the script is line 789, the source of the second error:

    }((window.jQuery), window, document));

The header of my admin page:

<script type="text/javascript" src="/admin/jsi18n/"></script>
<link href="/static/imageviewer.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>
<script type="text/javascript" src="/static/admin/js/urlify.js"></script>
<script type="text/javascript" src="/static/admin/js/prepopulate.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.js"></script>
<script type="text/javascript" src="/static/imageviewer.js"></script>
<script type="text/javascript" src="/static/my_code.js"></script>

The html for my image in the admin page:

<div class="readonly"><div id="image-gallery-3" class="cf"><img src="/documents/bfa1a808-7412-46c0-9d68-1a1df98f5a9c_thumb.jpg" data-high-res-src="/documents/bfa1a808-7412-46c0-9d68-1a1df98f5a9c.jpg" alt="" class="pannable-image"></div></div>

And the my_code.js to make this thing work, as shown in the example:

$(function () {
    $('.pannable-image').ImageViewer();
});

The only difference between the example page for ImageViewer and my code is that the my_code.js appears in the example page after the html for the image, and my_code.js appears before the html for the image. Does that make a difference?

I am not a js guy, and I have run into this same error before when trying to integrate a third party Javascript code with the django admin pages. I still don't have a solution to this problem, except not to try to use any custom js with the django admin pages!

I think there is some sort of interaction between the django jquery and third party js, which causes this error, but again, I am not a js guy! I have google the error and integrating third party js with the django admin, but have not found anything that works.

Thanks!

Mark

Answer 1

After some testing and more googling I found the following answer.

1. I had to add the line var jQuery = django.jQuery, $ = jQuery; at the top of the imageviweer.js file. The issues was the line django.jQuery = jQuery.noConflict(true); in jquery.init.js.

2. This image viewer allows one to zoom in on an image. So, there are really two images, the one that is loaded on the page, and the one that the imageviewer script manipulates for the zoom and pan. The image on my page seems to have been too small. Once I increased the size of that image, the zoom/pan worked.

Problem solved, and I hope this is a "universal" solution for future third party javascript plugins for the django admin pages.

Mark