Sir Trevor ordered-list.js Error _ is not defined ordered-list.js:16 - sirtrevor

Just playing with Sir Trevor editor and found some custom blocks that could be used, having some issue with the ordered-list.js, code at https://github.com/madebymany/sir-trevor-blocks/blob/master/src/ordered-list.js
I am getting this error message whenever I click on the "Ordered List" icon.
Error stack:
Uncaught ReferenceError: _ is not definedordered-list.js:16
Sir Trevor.Blocks.OrderedList.SirTrevor.Block.extend.editorHTMLindex.js:4
Sir Trevor is able to load the ordered list plugin as I can see in the options when I use it, this error happens when I click on the Ordered List icon to use.
Can anyone point me in right direction as to what is going on there, I'm new to javascript and have been struggling with this for a day now.....
Any suggestions?
This is how I load the scripts
<script src="../node_modules/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../build/sir-trevor.debug.js" type="text/javascript" charset="utf-8"></script>
<script src="../locales/de.js" type="text/javascript" charset="utf-8"></script>
<script src="../build/ordered-list.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
SirTrevor.config.debug = true;
SirTrevor.config.scribeDebug = true;
SirTrevor.config.language = "en";
SirTrevor.setBlockOptions("Text", {
onBlockRender: function() {
console.log("Text block rendered");
}
});
window.editor = new SirTrevor.Editor({
el: $('.sir-trevor'),
blockTypes: [
"OrderedList",
"Heading",
"Text",
"List",
"Quote",
"Image",
"Video",
"Tweet"
]
});
$('form').bind('submit', function () {
$('#st-json-debug').text(window.editor.store.toString(true));
return false;
});
});
</script>

You need Underscore.js . Thats what the error means. Load that as well.

Related

Google Map not rendered again - after pointing to load resources from rawgit it worked only for a week or so

I have my app using gmaps4rails working for a while after Google moved to GIT.
Here is what I am using in the application.htm.erb
<script src="https://maps.google.com/maps/api/js?v=3.23&libraries=geometry;&key=AIzaSyAncOJnAgKEjrv2PY__Z0gYy3zJyTznUQ0" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker-compiled.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox_packed.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer_packed.js" type="text/javascript"></script>
And in the Gemfile I have these lines
gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
In the application.js I have this line
//= require gmaps/google
Here is the page supposed to render the map.
<div class="row-fluid">
<div id="map" style='width: 100%; height: 500px; border: 1px solid black;'></div>
</div>
<script type="text/javascript">
buildMap (<%=raw #hash.to_json %>);
</script>
And the associated coffee script is
class RichMarkerBuilder extends Gmaps.Google.Builders.Marker #inherit from builtin builder
#override create_marker method
create_marker: ->
options = _.extend #marker_options(), #rich_marker_options()
#serviceObject = new RichMarker options #assign marker to #serviceObject
rich_marker_options: ->
marker = document.createElement("div")
marker.setAttribute 'class', 'marker_container'
marker.innerHTML = #args.title
_.extend(#marker_options(), { content: marker })
infobox: (boxText)->
content: boxText
pixelOffset: new google.maps.Size(-140, 0)
boxStyle:
width: "400px"
# override method
create_infowindow: ->
return null unless _.isString #args.infowindow
boxText = document.createElement("div")
boxText.setAttribute("class", 'marker_info_box') #to customize
boxText.innerHTML = #args.infowindow
#infowindow = new InfoBox(#infobox(boxText))
#buildMap = (markers)->
handler = Gmaps.build 'Google', { builders: { Marker: RichMarkerBuilder} } #dependency injection
#then standard use
handler.buildMap { provider: {}, internal: {id: 'map'} }, ->
markers = handler.addMarkers(markers)
handler.bounds.extendWith(markers)
handler.fitMapToBounds()
None of this code was recently changed (in the last week or so).
I only executed a bundle update today that upgraded the gems jbuilder from 2.4.1 to 2.5.0 and autoprefixer from 6.3.6.1 to 6.3.6.2.
The app was working having the map rendered until now when the map is not shown anymore.
I reverted these two gems to the previous versions but still no map rendered.
Don't know how to make it working again?
I just changed the order of the scripts to be loaded and now the map is rendered again, here is the code:
<script src="//maps.google.com/maps/api/js?v=3.23&libraries=geometry;&key=AIzaSyAncOJnAgKEjrv2PY__Z0gYy3zJyTznUQ0" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker-compiled.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox_packed.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer_packed.js" type="text/javascript"></script>
Problem solved.

Jasmine Testing Angular2 Components failing on #Component annotation

I have a simple test I'm trying to run through jasmine. Here are the ts files.
Unit-Test.html
<html>
<head>
<title>1st Jasmine Tests</title>
<link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css" />
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
<!--<script src="../node_modules/zone/lib/zone.js"></script>-->
</head>
<body>
<script>
// #2. Configure systemjs to use the .js extension
// for imports from the app folder
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {
'test': { defaultExtension: 'js' },
'app': { defaultExtension: 'js' }
}
});
// #3. Import the spec file explicitly
System.import('test/test.spec')
// #4. wait for all imports to load ...
// then re-execute `window.onload` which
// triggers the Jasmine test-runner start
// or explain what went wrong
.then(window.onload)
.catch(console.error.bind(console));
</script>
</body>
</html>
test.spec.ts
import {TestComponent} from "../app/components/about/test.component"
describe('Test Component->', () => {
it('has name given in the constructor', () => {
var t1 = new TestComponent('Super Cat');
expect(t1.myValue).toEqual('Super Cat');
});
it('does not have the id given in the constructor', () => {
var t2 = new TestComponent('Super Cat');
expect(t2.myValue).not.toEqual(1);
});
});
test.component.ts NOTICE THE COMMENTED OUT COMPONENT ANNOTATION
import {Component} from 'angular2/core';
//#Component({
// selector: 'test-component',
// templateUrl: "<div></div>",
//})
export class TestComponent {
constructor(value: string) {
this.myValue = value;
}
public myValue = '';
onKey2() {
return this.myValue;
}
}
Now if I hit the unit-test.html with the #Copmonent annotation commented out I get the following result
however if I uncomment the #Component annotation line, as this is really how my components will be defined... I get the following error
Can someone please tell me why I'm getting this error. I've tried importing "reflect-metadata" as well with no success
Ok, I think I got it... I had to change the script section in my unit-test.html to the following in this exact order!! Now I just have to figure out how to pull this into a separate project
<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="../node_modules/angular2/bundles/testing.dev.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>

Ember.js - uncaught TypeError: cannot read property 'hash' of undefined

I have an ember.js prototype, which was running fine until now. Since my last deployment I have been consistently getting the error Uncaught TypeError: Cannot read property 'hash' of undefined.
app.js file
// Application
Welcome = Ember.Application.create({
ready : function() {
}
});
// Model
Welcome.Ticket = Ember.Object.extend({
id : null,
buyerPartyId : null,
name : null,
priority : null,
description : null,
comment : null
});
// Controller
Welcome.ticketsController = Ember.ArrayController.create({
content : [],
loadTickets : function() {
var self = this;
$.getJSON('url here', function(
data) {
for ( var i = 0; i < data.serviceRequest.length; i++) {
self.pushObject(Welcome.Ticket.create(data.serviceRequest[i]));
}
});
}
});
Index.html
<!doctype html>
<html>
<head>
<title>Ticket List</title>
<link rel="stylesheet" href="css/normalize.css">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/libs/ember-0.9.5.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<h1>Ticket List</h1>
<script type="text/x-handlebars">
{{#view Ember.Button target="Welcome.ticketsController" action="loadTickets"}}
Load Tickets
{{/view}}
{{#each contentBinding="Welcome.ticketsController" tagName="ul"}}
<b>{{content.id}}</b> - {{content.buyerPartyId}}, <i>{{content.name}}</i>
{{/each}}
</script>
</body>
</html>
I am sure that I am overlooking something simple !! Any suggestions would be appreciated !!
Here is the error stack from Chrome dev console.
Uncaught TypeError: Cannot read property 'hash' of undefined ember-0.9.5.min.js:13
(anonymous function) ember-0.9.5.min.js:13
(anonymous function)
b.VM.template ember-0.9.5.min.js:9
Ember.View.Ember.Object.extend.render ember-0.9.5.min.js:12
Ember.View.Ember.Object.extend.renderToBuffer ember-0.9.5.min.js:12
Ember.View.Ember.Object.extend.createElement ember-0.9.5.min.js:12
Ember.View.states.preRender.insertElement ember-0.9.5.min.js:12
Ember.View.Ember.Object.extend.invokeForState ember-0.9.5.min.js:12
c ember-0.9.5.min.js:10
j ember-0.9.5.min.js:10
f.flush ember-0.9.5.min.js:10
f.end ember-0.9.5.min.js:10
Ember.run.end ember-0.9.5.min.js:10
i ember-0.9.5.min.js:10
AFAIK, with {{each}}, you need to provide the controller directly. Something like:
{{#each Welcome.ticketController}}
{{/each}}
Take a look at this jsFiddle http://jsfiddle.net/lifeinafolder/nVr4r/. Its not throwing the error anymore.
"Load Tickets" button wont work as you dont have a url yet.
Emberjs documentation has a couple of examples using {{each}} too. You should take a look.
Also, you might wanna update your emberjs. In the ember world, 0.9.5.min is pretty old :)

How to configure Mathjax in Python Django

I would like to know how to configure Mathjax in Django in a Q&A system where Questions and Answers will be based on LaTeX format.
I have tried to add:
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
into the html template where the questions and answers will be displayed to no avail.
Thanks.
If the page's content is dynamically created, you will need to call MathJax after the content has been loaded. See the documentation for details. The main idea is that you have to include
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
in the javascript that is executed after the content is in place.
fOR Dynamic content here's is the working solution. I used AsciiMath Input as the input format in mathjax that incorporates ASCIIMathML.
In the base.html add the following scripts:
<script>
MathJax = {
loader: {load: ['input/asciimath', 'output/chtml']}
}
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/startup.js"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml.js">
and remember to enclose the dynamic text by back-ticks”, i.e., `...` So in the django-admin you can simply enter sqrt(50) as ` sqrt(50) ` or ` x^2 ` and the dynamic content which is passed from view to the template, in the template you surround {{e1}} by back-ticks
` {{ e1 }} `
instead of
{{ e1 }} where e1 is the dynamic content. So if e1 which was earlier displayed in plain text as 2*sqrt(2) will now be displyed as 2√2.
For more details: http://docs.mathjax.org/en/latest/input/asciimath.html#asciimath-support
see https://docs.mathjax.org/en/latest/web/configuration.html. For the demo indicated here to work you should also add ['\(', '\)'] to inlineMath:
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-svg.js">
</script>

Why does this Ember.js app fail in Firefox?

I have a very simple Ember.js app which works correctly in IE and Chrome, but fails in Firefox (9.0.1 and 10.0). Any reason why? Here's the code:
<!doctype html>
<html>
<head>
<title>Template Name</title>
</head>
<body>
<script type="text/x-handlebars" data-template-name="my-template">
{{App.user.name}}
</script>
<div id="container"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.4.js"></script>
<script type="text/javascript">
window.App = Ember.Application.create();
App.user = Ember.Object.create({
name: 'John'
});
App.view = Ember.View.create({
templateName: 'my-template'
});
App.view.appendTo('#container');
</script>
</body>
</html>
The error in firefox is
uncaught exception: Error: <Ember.View:ember143> - Unable to find template "my-template".
This would seem to indicate that the template script has not been evaluated at the point where the app executes. The solution is to wait for onload. Wrap your appendTo like this:
$(function() {
App.view.appendTo('#container');
});
I just experienced the exact same issue. I found out that it was caused due to Ember being dependent on Handlebars. It looks like after version 1.0 they removed the inclusion of the Handlebars source code. After adding in the Handlebars library, the error goes away.
Ember.Application.create({
ready: function() {
App.view.appendTo('#container');
}
});
Tom Whatmore has the correct answer to this in the comments.
The error is displayed in the javascript console only if you use the unminified version of ember.js
The problem is that the template hasn't been evaluated by ember because you're code is executing as soon as the browser hits it, rather than after the ember application has been fully created.