We Keep Coding

I am not able to get any of my JSLink working. What am I doing wrong

We have SharePoint 2013 on Prem and I am trying to do some customizations using JS Link. Even the most simple exercises are not working. I don't understand what I'm doing wrong.
New page - List added and jS Link = ~site/SiteAssets/js-test/OverRideCustomHeader.js
(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Header = overrideCustomHeader;
overrideContext.Templates.Footer = overrideCustomFooter;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();
function overrideCustomHeader() {
return “<h3>Our Custom Header</h3>”;
}
function overrideCustomFooter() {
return “<h3>Our Custom Footer</h3>”;
}
I expect to see a header and a footer display and they are not.

Insert script editor webpart into the page and insert the script into script editor webpart(use correct 【"】).
(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Header = overrideCustomHeader;
overrideContext.Templates.Footer = overrideCustomFooter;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();
function overrideCustomHeader() {
return "<h3>Our Custom Header</h3>";
}
function overrideCustomFooter() {
return "<h3>Our Custom Footer</h3>";
}
Update:
Have you enabled Minimal Download Strategy?
JSLink won't work if url like /_layouts/15/start.aspx# , you could disable the feature.

Permanently change array even with page refresh

I'm coding using Angular 2 (Typescript) and on my webpage I have different forms with inputs and when I submit those forms they trigger their own function that adds a new instance of an object based on the inputs to an array, which is then reflected in a table on the page that is generated from said array. How can I permanently save those changes in the array after the page is refreshed. The array DPS is imported from another directory. The submitForm function is in a Typescript file of a component that's separate from the Typescript and component of the main page (the HTML and rest of the Typescript). Below, you'll see my use of onload="myFunction()" for my overall container on the main page and the myFunction() function as well.
Here's the function that adds to the array:
submitForm(value: any){
var val1 = String((<HTMLInputElement>document.getElementById("dataPoint")).value);
var val2 = String((<HTMLInputElement>document.getElementById("ICCP")).value);
var val3 = String((<HTMLInputElement>document.getElementById("startDate")).value);
var val4 = String((<HTMLInputElement>document.getElementById("endDate")).value);
let blah = new DataTable(val1,val2,val3,val4);
DPS.push(blah);
localStorage.setItem("DPS", JSON.stringify(DPS));
}
div for my main page:
<div class="container-fluid page" onload="myFunction()">
myFunction():
myFunction(){
let DPS = localStorage.getItem("DPS");
if (DPS) {
localStorage.removeItem("DPS");
DPS = JSON.parse(DPS);
}
}

You can save it in the localStorage:
...
DPS.push(blah);
localStorage.setItem("DPS", JSON.stringfy(DPS));
And on page load you can check if you already have it:
let DPS = localStorage.getItem("DPS");
if (DPS) {
localStorage.removeItem("DPS");
DPS = JSON.parse(DPS);
// you have an intance
}
Edit
Seems that there's a library for local storage in angular2: angular2-localstorage.

Securing eval function

I have written two applications:
JS script attached on different websites
Management panel for me
Each script will create different DOM structure using JS, I can create javascript code doing this for each website from management panel.
Thus I have to keep this part of code in the database, and use eval in each script to run it.
The sample eval looks like this:
var container = document.createElement('div');
container.innerHTML = "Fjkdfjdf";
html = {
container: container
};
doAction();
So first I create DOM elements, then I attach some of them to the attribute in my script, then I call some function in my script - attaching these elements to body. The script looks like this:
(function() {
var module = (function() {
var html = ();
var fire = function() {
Api.getStyles(function(response) {
eval(response.script);
};
};
var doAction = function() {
document.getElementsByTagName('body')[0].appendChild(html.container);
};
return {
fire: fire,
doAction: doAction
};
});
module.fire();
)();
Is this safe enoough? Can someone override doAction() method and do whatever he wants?

Mulitple canvas-images (by Chart.js) with toDataURL()

How to handle two or more linked Canvas-Charts with Chart.js? With this script the canvas-image is linked with a bigger version to present the big file in a fancybox or just two download it (right-click -> save). Easy.
<a HREF="#" id="canvas_link_1">
<canvas id="image1"></canvas>
</a>
<a HREF="#" id="canvas_link_2">
<canvas id="image2"></canvas>
</a>
To use toDataURL() with Chart.js it's a bit tricky, cause it will render the whole chart not before the animation has ended. If we do ask for the URL too early, it will present an empty (transparent) image. That's why we need onAnimationComplete in the options:
var options = {
onAnimationComplete: done
}
Later in the script, it will fire/change the new HREF, when the animation is over.
var ct1 = document.getElementById("image1").getContext("2d");
ct1.canvas.width = document.getElementById("image1").offsetWidth;
ct1.canvas.height = document.getElementById("image1").offsetHeight;
var Chart1 = new Chart(ct1).Line(lineChartData1,options);
function done() {
var url1=document.getElementById("image1").toDataURL();
document.getElementById("canvas_link_1").href=url1;
}
var ct2 = document.getElementById("image2").getContext("2d");
ct2.canvas.width = document.getElementById("image2").offsetWidth;
ct2.canvas.height = document.getElementById("image2").offsetHeight;
var Chart2 = new Chart(ct2).Line(lineChartData2,options);
function done() {
var url2=document.getElementById("image2").toDataURL();
document.getElementById("canvas_link_2").href=url2;
}
That works. But only with one canvas-image. If I delete the 2nd function done() it will work with the 1st canvas, if I delete the 1st function, only the 2nd canvas presents the url.
I think the problem is with "done", it's not a name, just like a situation, or? The "var options" is are general for all canvas-images (for sure I can change to options1 and options2 and also to "Line(lineChartData1,options1)" but without any change)... so "done" will fire all functions and - that's bad - appearently only the last function.
On the other side I cannot rename the entry of onAnimationComplete. It's null or done, nothing else. What is to do?

You can have different callbacks with different names. "done" is just an example name (a better name would probably be "completed").
For example - first create two option objects, one for each chart:
var options1 = {
onAnimationComplete: done1
};
var options2 = {
onAnimationComplete: done2
};
Then initialize the charts with those:
...
var Chart1 = new Chart(ct1).Line(lineChartData1, options1);
...
var Chart2 = new Chart(ct2).Line(lineChartData2, options2);
And finally define the callbacks:
function done1() {
var url = document.getElementById("image1").toDataURL();
document.getElementById("canvas_link_1").href = url;
}
function done2() {
var url = document.getElementById("image2").toDataURL();
document.getElementById("canvas_link_2").href = url;
}
Hope this helps (and that I understood the problem correctly) !

javascript class killing app

just a quick one, im using a oop style for my javascript game but for some reason when i add in a new class it kills any functions from other classes i have included.
Here is the script i am talking about which is my main file which i will include all my class files in:
$(document).ready(function(){
var canvas = document.getElementById("TBG");
var context = canvas.getContext("2d");
var ui = new Gui();
// var level = new Level();
//----------Login/Register Gui --------------
$('#TBG').hide();
$('#load-new').hide();
$('#reg').hide();
$('#login').hide();
//if login_but is clicked do ui.login function
$('#login_but').click(ui.login);
//if reg_but is clicked do ui.register function
$('#reg_but').click(ui.register);
$('#new_but').click(function(){
game_settings("new");
});
$('#load_but').click(function(){
game_settings("load");
});
//if login_sumbit button is clicked do ui.login_ajax function
$("#login_submit").click(ui.login_ajax);
$("#reg_submit").click(ui.register_ajax);
$("#welcome").on("click", "#logout_but", ui.logout);
//___________________________________________________________________
//Initialisation of game
function game_settings(state){
if(state == "load"){
ui.load_game();
//do ajax call to load user last save
level.level_init(0,1);
}
else{
//set beginning params
//Change screens
ui.new_game();
alert("new game");
}
}
});
in the context of the script above, my problem is when i just have the call to new Gui() without the call to new level underneath or commented like you can see, well then all of the functions below under the heading login/register gui works perfectly, but as soon as i put the call to new level in or uncomment it, it kills all of the functions under the login/ register gui heading.
Why is this?
EDIT: here is the level.js file in case you would like to see it and how i am constructing my classes:
function Level(){
this.level_init = function(level, location){
var saved_level = level;
var saved_location = location;
};
this.get_tileset = function(){
};
this.draw = function() {
}
}
Thanks
Tom

SOrry guys, it turns out it was a silly mistake on my behalf i didnt add the script in html!, i need more sleep i think haha! thanks for your input
TOm