I am trying to introduce Angular in my Django app. I doubt, that my problem is directly correlated with interpolateProvider which is needed because of django templates... but who knows.
I also have a problem with simplified version of that: http://jsfiddle.net/33417xsm/
This is my current version:
<html ng-app="MyApp">
<head>
<script type="text/javascript" src="/static/js/libs/angular/angular.js"></script>
<script type="text/javascript" src="/static/js/app/app.js"></script>
</head>
<body>
<div ng-controller="MyAppController">
[[ 2 + 4 ]]
<p>[[ MyAppController.product.title ]]</p>
</div>
</body>
</html>
file: app.js
(function(){
var app = angular.module('MyApp', []);
app.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}
);
app.controller('MyAppController', function (){
this.product = gem;
});
var gem = {
'title': 'Inferno'
};
})();
My result:
As you can guess, I want to also display Inferno. What I am doing wrong?
Your app config is ok. But i see, you didn't understand clearly angular concept.
You must use $scope to binding data. Also you never need "myController.product" like this notation.
I updated your code http://jsfiddle.net/33417xsm/4/
<div ng-app="MyApp" ng-controller="MyAppController">
{{ 2 + 4 }}
<p>{{product.title}}</p>
</div>
var app = angular.module('MyApp', []);
app.controller('MyAppController', function ($scope){
$scope.product = {"title":"product title"};
});
Related
I wondered if anyone has managed to get Google maps working within a Django project and if so, could they tell me what I may be doing wrong.
In base.html, I have the following scripts at the end of the body in base.html :
<script src="{% static '/js/script.js' %}" ></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src=https://maps.googleapis.com/maps/api/js?key=”API_KEY”&callback=initMap"></script>
<script src="{% static '/js/maps.js' %}" ></script>
Script.js is working fine and map.js is executing but after map.js runs the div element doesn’t display.
In maps.js, I have:
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
//zoom: 3,
zoom: 10,
center: {
lat: 46.619261, lng: -33.134766
}
});
var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var locations = [
{ lat: 40.785091, lng: -73.968285},
{ lat: 41.084045, lng: -73.874245},
{ lat: 40.754932, lng: -73.984016}
];
var markers = locations.map(function(location, i){
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
var markerCluster = new MarkerClusterer( map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' } );
}
I do not seem to have any Google API key issues. However I have a div in the index.html with the following element and the map is not being displayed:
<div class="row">
<!-- Map -->
<div id="map" class="col-12"></div>
<div class="col-12 mt-2 request-page">
<h2>Map Will Go Above Here </h2>
</div>
</div>
I can get the map to display if I load static in index.html and place the scripts in index.html but ideally I think I am meant to do this in base.html.
I have not changed settings.py, views.py or urls.py to accommodate Google maps, is that where my error is?
Thanks in advance.
if there is a blank gap create a CSS file and add#map {height:500px;width: 100%;}
do not forget to link it to html.
This is probably because the div element #map does not have a defined height. Try adding style="height: 300px" to it.
I have the following unit test for my custom polymer component:
<head>
<meta charset="UTF-8">
<title>survey</title>
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
<script src="/web-component-tester/browser.js"></script>
<script src="../bower_components/test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/test-fixture/test-fixture.html">
<link rel="import" href="../bower_components/iron-test-helpers/iron-test-helpers.html">
<link rel="import" href="../views/components/survey.html">
</head>
<body>
<test-fixture id="Network">
<template>
<survey></survey>
</template>
</test-fixture>
<script>
describe('<survey>', function() {
var survey;
describe('network', function() {
beforeEach(function(done) {
survey = fixture('Network');
})
it('should work', function() {
expect(survey.$.dog).to.exist;
});
});
});
</script>
And the following custom polymer survey component:
<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="survey">
<template>
<h3 class="text-center">Tell us about yourself!</h3>
<div class="form-group">
<label>I'm a...</label>
<array-selector id="imaSelector" items="{{ima}}" selected="{{imaSelected}}" multi toggle></array-selector>
<template is="dom-repeat" id="imaList" items="{{ima}}">
<div class="checkbox">
<paper-checkbox id="{{item.id}}" on-iron-change="toggleIma">{{item.name}}</paper-checkbox>
</div>
</template>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'survey',
properties: {
ima: {
type: Array,
value: function() {
return [ {
name: 'House Cat',
id: 'houseCat'
}, {
name: 'Basic Dog',
id: 'dog'
}, {
name: 'Swimming Fish',
id: 'fish'
}];
}
},
},
toggleIma: function(e) {
var item = this.$.imaList.itemForElement(e.target);
if (item) {
this.$.imaSelector.select(item.id);
}
}
})
</script>
This test will fail, because the local dom is not initialized, due to the fact that I'm using a dom-repeat element.
How do I want until the local dom is stamped?
There are two parts to this. Waiting for the async render, and finding the node.
For the render: Either listen for the dom-change event from the dom-repeat template, or call the render() method on the dom-repeat to force a synchronous render.
In unit tests, you probably just want to call render().
For finding the node--this.$ is only populated with statically created elements (not, for example, elements from a dom-if or dom-repeat template), as described in the docs. This is a frequent source of confusion.
You can use the this.$$ convenience method to query a local DOM element by selector, so you could do something like this:
survey.$.imaList.render();
expect(survey.$$(#dog)).to.exist;
You could return a Promise instead of expecting something immediately:
it('should work', function() {
return expect(survey.$.dog).should.eventually.exist();
});
See http://mochajs.org/#asynchronous-code for more information.
This seems to be a Polymer issue. The issue is I was trying to use the this.$ selector to reference dynamically created nodes. However, the polymer documentation explicitly states that the this.$ will only include statically created nodes, not dynamically created nodes.
See the note in this link. This is for the 0.5 version, but I am assuming this is the same in the 1.0 version. If there are any other know solutions than those mentioned in the link, I would love to hear them.
https://www.polymer-project.org/0.5/docs/polymer/polymer.html#automatic-node-finding
Note the final solution, looks something like this:
describe('network', function() {
beforeEach(function(done) {
survey = fixture('Network');
flush(function(){
done()
});
})
it('should work', function() {
expect(survey.querySelector('#dog')).to.exist;
});
});
Note that flush() is needed to ensure the dom is loaded.
https://www.polymer-project.org/0.5/articles/unit-testing-elements.html#wct-specific-helpers
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>
<script type="text/javascript">
document.getElementById("IDOFELEMENT");
</script>
What is the correct way to turn this into a link?
Can I write
<script type="text/javascript">
document.getElementById("IDOFELEMENT").href("http://www.address.com");
</script>
Many thanks.
javascript:
// this changes the href value<br>
document.getElementById("IDOFELEMENT").href = "http://www.address.com";
and the html:
<a href="www.toBeChanged.com" id="IDOFELEMENT">To Website< /a>
You should specify what kind of element is IDOFELEMENT. But you can't convert it to a link by just adding a href attribute, it only works if IDOFELEMENT
is an hyperlink like <a id="IDOFELEMENT">stuff</a>
Simplest way is to add an onclick event to the element that changes the url to desired address:
<script type="text/javascript">
var element = document.getElementById("IDOFELEMENT");
element.setAttribute('onclick', 'window.location.href=\'http://address.com\'');
</script>
Or if you wanna wrap it with a hyperlink:
<script type="text/javascript">
var element = document.getElementById("IDOFELEMENT");
var parent = element.parentNode;
var link = document.createElement('a');
link.href = 'http://www.address.com';
link.appendChild(element.cloneNode(true));
parent.replaceChild(link, element);
</script>
I hope this helps you.
I came accross the issue - Javascript error: Cannot read property 'parentNode' of null.
I discovered this was due to executing this code while the DOM is not ready.
window.onload solved the issue for me.
<script>
window.onload = function() {
var element = document.getElementById("IDOFELEMENT");
var parent = element.parentNode;
var link = document.createElement('a');
link.href = 'http://www.google.com';
link.appendChild(element.cloneNode(true));
parent.replaceChild(link, element);
};
</script>
You just need to wrap your element in an anchor tag as follows...
<a href="http://www.address.com">
<div id="IDOFELEMENT">
... content ...
</div>
</a>
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.