We Keep Coding

Django Admin and third party Javascript

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

After some testing and more googling I found the following answer.
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.
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

Which files are need from Kendo core to use Mobile and Angular?

I have seen similar questions to this, but I haven't been able to find an answer. Anyway, I am experimenting using Kendo (open source core for now) in a Visual Studio Cordova project. Taking Cordova out of the equation to start with, I am just trying to get a very simple view with the following to work..
...
<script src="lib/kendo-ui-core/js/jquery.min.js"></script>
<script src="lib/angularjs/angular.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.core.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.angular.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.loader.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.view.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.pane.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.application.js"</script>
</head>
<body kendo-mobile-application ng-app="foo">
<kendo-mobile-view ng-controller="MyCtrl" k-title="'My Title'" k-layout="'default'">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
<kendo-view-title></kendo-view-title>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<div>{{hello}}</div>
</kendo-mobile-view>
<script>
angular.module("foo", [ "kendo.directives" ])
.controller("MyCtrl", function($scope) {
$scope.hello = "Hello World!";
});
</script>
<script src="scripts/index.js"></script>
</body>
</html>
I added each Kendo file to try and get rid of each error (initially just started with kendo.core.js)
At this stage, when I try to run this (just opening index.html in Chrome, out side of Visual Studio), I get
Uncaught TypeError: kendo.ViewContainer is not a function
Observable.extend.init # kendo.mobile.view.js:469
Widget.extend.init # kendo.mobile.pane.js:102
startHistory # kendo.mobile.application.js:171
So this is occuring at the line
that.viewContainer = new kendo.ViewContainer(that.container);
in the file kendo.mobile.view.js.
I don't seem to be able to find where ViewContainer is declared.
If I use a CDN of like <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"> then this works fine, so I need to know which references to use from the core library.

I found the doco that explains what I need here.
I added everything for the "Application" section (in the exact order listed), and then put
<script src="lib/kendo-ui-core/src/js/kendo.angular.js"></script>
at the end.

angular js i18n translate loading issue

I am using http://github.com/angular-translate/angular-translate for website localization.
when page load it's working perfectly.
But load page partially, the translation works in lagging way. That means,
Partial page loads first with the tag and showing in the same way in the page.
{{ 'CONGRATS' | translate }}
After 5 or 8 seconds, it translate to original text. Sometime network may be slow. In that time this should not be show like that.
Translation should be done properly, before page show to the user.
How to rectify this error ?
What mistake I made here ?
I've loaded the angular js scripts in the following manner.
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="App/angular-translate.js"></script>
<script src="App/angular-translate-loader-static-files.js"></script>
<script src="App/angular-translate-loader-partial.js"></script>
<script src="App/app.js"></script>
I am loading the languages in app.js like following,
var langSvSE = {
"ENTER_EMAIL_ADDRESS": "Ange e-post adress",
"PASSWORD": "Lösenord",
}
$translateProvider.translations('sv-SE', langSvSE);
$translateProvider.preferredLanguage('sv-SE');

Implementing Fullcalendar into a Wordpress page

I'm trying to implement FullCalendar into a page on my wordpress web site using the built in page editor.
Here's the code:
<code>
<!DOCTYPE html>
<html>
<head>
<link href='../fullcalendar-2.0.2/fullcalendar.css' rel='stylesheet' />
<script src='../fullcalendar-2.0.2/lib/moment.min.js'></script>
<script src='../fullcalendar-2.0.2/lib/jquery.min.js'></script>
<script src='../fullcalendar-2.0.2/fullcalendar.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
</code>
The problem I am having is that even though I am following the implementation guides closely I keep getting the error:
Uncaught SyntaxError: Unexpected token <
When I click to go into the code in the console it loads nothing up and after an hour of changing small things it's completely stopped me moving forward

If you want to do this in your page's content, you should not include the <html>, <head>, etc elements. You will also need to use an absolute path to your included files so that they do not products 404 errors (likely where the error you see is coming from) - this means you need to start the URL with a / to point directly to the files.
Try this code, assuming that fullcalendar is in your theme under the directory /wp-content/themes/yourtheme/fullcalendar-2.0.2/:
<link href='/wp-content/themes/yourtheme/fullcalendar-2.0.2/fullcalendar.css' rel='stylesheet' />
<script src='/wp-content/themes/yourtheme/fullcalendar-2.0.2/lib/moment.min.js'></script>
<script src='/wp-content/themes/yourtheme/fullcalendar-2.0.2/lib/jquery.min.js'></script>
<script src='/wp-content/themes/yourtheme/fullcalendar-2.0.2/fullcalendar.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
});
});
</script>
<div id="calendar"></div>

I have discovered that the Wordpress plugin for Fullcalendar allows for custom XML feeds. So I have managed to implement the calendar onto my page, which was the aim of this question.

Cannot get access to Marionette module from app.js

I am currently working my way through David Sulc's excellent "Backbone.Marionette.js: A Gentle Introduction" and have come unstuck at modules. With the app as it currently stands I am trying to access an API in a module called 'contacts.js' from the index.html script but I get the following error when I try to run the app:
"Handler not found for 'contact: entities' "
I am able to hit the API directly from the console in Chrome and manually get the 'contact' information so I was thinking this was a loading sequence problem where the API might not be available by the time app.js loads, however the loading sequence is as follows:
<script type="text/javascript" src="assets/js/vendor/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="assets/js/vendor/json2.js"></script>
<script type="text/javascript" src="assets/js/vendor/underscore-min.js"></script>
<script type="text/javascript" src="assets/js/vendor/backbone-min.js"></script>
<script type="text/javascript" src="assets/js/vendor/backbone.marionette.min.js"></script>
then the local scripts as follows:
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/entities/contact.js"></script>
and a script tag below the last two script tags directly runs the following code:
<script type="text/javascript">
... some view code
ContactManager.on("initialize:after", function(){
var contacts = ContactManager.request("contact: entities");
... some more code
</script>
the line beginning var contacts = ..... is the one giving me the error. Any help appreciated
I am as certain as I can be that I have scripted this exactly as per the book.

You have a space in your event name:
<script type="text/javascript">
... some view code
ContactManager.on("initialize:after", function(){
// Remove the space in contact: entities -->
var contacts = ContactManager.request("contact: entities");
... some more code
</script>