I have defined class Media as:
class LtAdmin(admin.ModelAdmin):
form = LtForm
class Media:
js = ('javascript/lt/showhid_follow_up.js',)
This javascript code lies in django project folder:
/home/myself/mysite/static/javascript/lt/showhid_follow_up.js
settings.py contains:
STATIC_URL = '/static/'
Javascript is as follows:
jQuery(document).ready(function($){
alert('Hi');
});
Do I have to define MEDIA_URL to use this? Do I have to have a src in the javascript? If I add and , it displays error:
Uncaught SyntaxError: Unexpected token <
On removing this, error I get:
Uncaught TypeError: Property 'jQuery' of object [object Object] is not
a function
How do I resolve this problem? I have tried using FireFox as well as Chrome browsers
Am I missing some other settings?
jQuery is included already in Django admin, it's just under the django namespace. Passing in django.jQuery using an immediately invoking function allows you to use the more familiar $ shortcut instead of having to write django.jQuery all the time.
(function($) {
$(function() {
alert('Hi');
});
})(django.jQuery);
Related
I'm trying to render a twig (with twigjs) template within a chrome extension. I'm currently compiling the following typescript with a browserify build script.
import * as twig from "twig"
const MAIN_TEMPLATE: string = chrome.runtime.getURL("twig/main.html.twig");
document.addEventListener("DOMContentLoaded", () => {
twig.renderFile(MAIN_TEMPLATE, (err: Error, html: string) => {
document.querySelector("body").innerHTML = html;
});
});
I've made sure to include the files in my manifest.json, as such.
...
"web_accessible_resources": [
"twig/*.html.twig"
]
...
However, upon running this, I get the following stacktrace. I'm not really sure what to do, as the URL that chrome.runtime.getURL returns does resolve if I punch it into my address bar.
Uncaught TypeError: t.stat is not a function
at Object.<anonymous> (twig.js:1)
at Object.e.Templates.loadRemote (twig.js:1)
at Object.e.exports.twig (twig.js:1)
at Object.e.exports.renderFile (twig.js:1)
at HTMLDocument.<anonymous> (browser-action.ts:7)
Digging through some of the twigjs source code, it looks like it was a mistake of mine to use the renderFile helper. This is more correct.
const MAIN_TEMPLATE_URI: string = chrome.runtime.getURL("twig/main.html.twig");
const MAIN_TEMPLATE: twig.Template = twig.twig({href: MAIN_TEMPLATE_URI, async: false};
document.querySelector("body").innerHTML = MAIN_TEMPLATE.render({tabs, tabListTemplate: TAB_LIST_TEMPLATE_URI});
I used async false since it's only going to be getting from a local connection, so there really shouldn't be any lag loading the template synchronously.
I want to place my online game that I made that with pure javascript and html5 canvas in my angular2 project.
I wrote my scripts in external file and add the script tag in the head on angular index.html and in my component's typescript I declared my onload function like this:
declare var startGame1: any;
the startGame1 is a method that make the canvas ready for my game.
the problem is when I call startGame1() in AfterViewInit I get errors like this:
Unhandled Promise rejection: Error in :0:0 caused by: Cannot read property 'clearRect' of undefined ; Zone: angular ; Task: Promise.then ; Value:
ViewWrappedError {__zone_symbol__error: Error: Error in :0:0 caused by: Cannot read property 'clearRect' of undefined at ViewWrappedErro……} Error: Error in :0:0 caused by: Cannot read property 'clearRect' of undefined
I suggest you to load the external js using the .angular-cli.json.
In the apps -> scripts and insert the relative path of your external .js in the array.
And inside the app folder, create a .d.ts file to insert your declare var startGame1: any;. For example:
myGame.d.ts
declare var startGame1: any;
The myGame.d.ts will be loaded automatically by the webpack and then define your startGame1 for your app.
Hy there
I'm new to Webpack or JS-bundel in general. So this question might sound dumb. If so, I'm sorry..
I'm using webpack to bundle all JS files. So far I have this im main.js:
var jQuery = require('jquery');
var autogrow = require('jquery.ns-autogrow');
(function($){
$(function(){
$('textarea').autogrow();
});
})(jQuery);
But now I get Uncaught TypeError: Cannot read property 'fn' of undefined right at the beginning of the ns-autogrow plugin/module.
(function($, window) {
return $.fn.autogrow = function(options) { ...
Is there something I made wrong requiring the dependencies?
You have to include jquery dependency at the global scope of your app to use it this way :
(function($){
$(function(){
$('textarea').autogrow();
});
})(jQuery);
To do it, you should use something like :
externals: {
// require("jquery") is external and available
// on the global var jQuery
"jquery": "jQuery"
}
you can see more details at this address
I hope it may help
It says here(http://ace.c9.io/#nav=embedding) just copy one of src* subdirectories somewhere into your project
I have put it in mykeystoneapp/public/js(my default home is mykeystoneapp/public)
Here are the errors I get:
1.Uncaught TypeError: $.cookie is not a function(ui.js:8)
2.Uncaught Error: Missed anonymous define() module: function …(require.js:141)
http://requirejs.org/docs/errors.html#mismatch
Here is my Jade code:
script(src='/js/ace/demo/kitchen-sink/require.js')
script.
require.config({paths: {ace: "/js/ace/build/src"}});
define('testace', ['ace/ace'],
function(ace, langtools) {
console.log("This is the testace module");
var editor = ace.edit("editor_container");
editor.setTheme('eclipse');
editor.session.setMode('javascript');
require(["/js/ace/lib/ace/requirejs/text!src/ace"], function(e){
editor.setValue(e);
})
});
require(['testace']);
Secondly if I put debugger in EventEmitter(https://github.com/ajaxorg/ace-builds/blob/master/src/ace.js#L3300)
I can see it’s properly reaching EventEmitter._dispatchEvent with
eventName=‘changeMode’ but it returns without any operation as there are no !listeners or defaultHandler
editor.session.setMode('javascript'); is wrong, it should be editor.session.setMode('ace/mode/javascript'); instead. Same for theme which is supposed to be ace/theme/eclipse.
error in ui.js is not related to ace, since ace doesn't have a file named ui.
I'm trying to bring toastr into my application. I've done something very simple:
bundles.Add(new ScriptBundle("~/Content/example-scripts").Include(
"~/Areas/Examples/Scripts/vendor/*.js"
));
Where that folder contains toastr.js. And then in my view:
#Scripts.Render("~/Content/example-scripts")
I see toastr getting loaded in Chrome, yet when I call toastr from my viewmodel:
$(document).ready(function () {
toastr.success('sup');
ko.applyBindings(new ViewModel());
});
I get the following errors:
Uncaught Error: Mismatched anonymous define() module: function ($) {
return (function () {
var version = '2.0.1';
var $container;
var listener;
var toastId = 0;
var toastType = {
error: 'error',
info: 'info',
success: '...<omitted>...ch require.js:166
Uncaught ReferenceError: toastr is not defined sampleVm.js:36
What am I doing wrong?
It seems you are using require.js because the error message is coming from it.
And the Mismatched anonymous define() module means that toaster.js was defined as an anonymous module but it was not loaded through require.js module loading mechanism.
So there is two solution for this in your case:
If you are using require.js, use that to load toaster.js
If it was not intended to use require.js, just remove the reference from your page and toaster.js will load just fine