Recently, I encounter a problem when implement my web app on SharePoint with IE8.
Since the default broswer for my SharePoint is IE8 and this is unchangeable for my situration.
Please click the following link with my look on my flow of application
The flow >> Select server and date > Show figure in chart with highchart.js > Click the plot on chart > Show table with datatable.js
what my problem pop-up is when I clicked the plot of the line
sp.core.js?rev=7ByNlH%2BvcgRJg%2BRCctdC0w%3D%3D:2 Uncaught TypeError: a.indexOf is not a function(…)
Although chrome is encounter this error as well, it worked well if you ignore the error. But IE8 will stop me immediately.
What I found on google, the way of handling indexOf() in IE8 is adding following script in my HTML
if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function(elt /*, from*/)
{
var len = this.length >>> 0;
var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++)
{
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}
But where should I add? before the or after loaded all JS library?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5;IE=8">
<link rel="stylesheet" href="SiteAssets/css/appLog/rome.css">
<link rel="stylesheet" href="SiteAssets/css/appLog/responsive.dataTables.min.css">
<link rel="stylesheet" href="SiteAssets/css/appLog/jquery.dataTables.min.css">
<link rel="stylesheet" href="SiteAssets/css/appLog/bootstrap.min1.css">
<!-- jQuery library -->
<script src="SiteAssets/javascript/appLog/jquery-1.8.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="SiteAssets/javascript/appLog/bootstrap.min.js" type="text/javascript"></script>
<script src="SiteAssets/javascript/appLog/rome.js" charset="UTF-8" type="text/javascript"></script>
<script src="SiteAssets/javascript/appLog/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="SiteAssets/javascript/appLog/dataTables.responsive.min.js" type="text/javascript"></script>
<script src="SiteAssets/javascript/appLog/highcharts.js" type="text/javascript"></script>
<script src="SiteAssets/javascript/appLog/data.js" type="text/javascript"></script>
<script src="SiteAssets/javascript/appLog/exporting.js" type="text/javascript"></script>
Is there any way that I can do it without edit any code in the sharepoint core javascript?
Related
I am getting the error "cannot read property'innerHTML' of null" at line 11 in the file letterbyletter.js. Its code is this:
function printLetterByLetter(destination, message, speed){
let h = 0;
var interval = setInterval(function(){
if (h===0) {
stop=false
}
if (h > message.length||(stop===true&&h!==0)){
clearInterval(interval);
stop=false
}else if (message.charAt(h)!=="<") {
document.getElementById(destination).innerHTML += message.charAt(h);
h++;
}else {
document.getElementById(destination).innerHTML += "<br>"
h+=4
}
}, speed);
}
It is being called here:
function run(num9) {
if (stats[3][1]>enemies[num9].speed) {
let r=Math.ceil(Math.random()*100)
if (r>=50) {
battlechk=false
document.getElementById("body").innerHTML="<div class=\"textbox\" id=\"textbox\"></div>"
printLetterByLetter("textbox","You escaped from "+enemies[num9].name+"!",50)
document.getElementById("body").innerHTML+="<button class=\"option\" onclick=\"supdateGUI3()\">Confirm</button>"
}else {
document.getElementById("body").innerHTML="<div class=\"textbox\" id=\"textbox\"></div>"
printLetterByLetter("textbox",enemies[num9].name+" blocks your path! "+enemies[num9].name+" attacks you!",50)
document.getElementById("body").innerHTML+="<button class=\"option\" onclick=\"battle("+num9+")\">Confirm</button>"
}
}else {
let r=Math.ceil(Math.random()*100)
if (r>=90) {
battlechk=false
document.getElementById("body").innerHTML="<div class=\"textbox\" id=\"textbox\"></div>"
printLetterByLetter("textbox","You escaped from "+enemies[num9].name+"!",50)
document.getElementById("body").innerHTML+="<button class=\"option\" onclick=\"supdateGUI3()\">Confirm</button>"
}else {
document.getElementById("body").innerHTML="<div class=\"textbox\" id=\"textbox\"></div>"
printLetterByLetter("textbox",enemies[num9].name+" blocks your path! "+enemies[num9].name+" attacks you!",50)
document.getElementById("body").innerHTML+="<button class=\"option\" onclick=\"battle("+num9+")\">Confirm</button>"
}
}
battle(num9)
}
Every one of the calls in the above code cause the same error. A deeper look reveals that the textbox is there when printLetterByLetter is called and that the destination is textbox. When I console logged document.getElementById(destination) I got null. printLetterByLetter has worked every other time I have used it and I haven't gotten an error when I have used other commands that are similar. My entire code can be found here: https://github.com/Fish767/Space-Clones. The files in question are run.js and letterbyletter.js. Destination is a string and the line before I called printLetterByletter I added the element with an id of textbox.
Steps to reproduce: press move and left twice and then move and explore until you get into a battle. Then press run.
The html doc is this:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/first.css">
<title id="title">Lives in Space</title>
</head>
<body id="body">
<script src="js/globalvars.js"></script>
<script src="js/sleep.js"></script>
<script src="js/letterbyletter.js"></script>
<script src="js/format.js"></script>
<script src="js/cleardoc.js"></script>
<script src="js/doEffects.js"></script>
<script src="js/use.js"></script>
<script src="js/toss.js"></script>
<script src="js/battleresults.js"></script>
<script src="js/friend.js"></script>
<script src="js/run.js"></script>
<script src="js/attack.js"></script>
<script src="js/battle.js"></script>
<script src="js/event.js"></script>
<script src="js/explore.js"></script>
<script src="js/moveto.js"></script>
<script src="js/second.js"></script>
<script src="js/rpgland.js"></script>
<script src="js/loop.js"></script>
</body>
</html>
I can easily do what I want in another way. What I am asking is why doesn't this way work.
I cloned the repo.
There is no "#textbox" in DOM when the error happen, it was replaced with "#statsbox" on battle function. You'll want to use chrome dev tool to debug step by step and it'll help you develop this game more easier also.
Happy coding!
It is because when you click the "confirm" button, you execute battle(0), and the first instruction in this function is to overwrite the entire DOM : document.getElementById("body").innerHTML="<div id=\"statsbox\"></div><div id=\"option-container\"></div>". So everything else disappears.
The reason why you can console.log the element at the beginning of printLetterByLetter() and then 10 lines later it logs null is because those 10 lines are within a setInterval which gets executed later, at the end of the lifecycle. The DOM has been overwritten in-between.
I'm trying to launch a HTML file in firefox automatically
Our company has IE set as the default and this file is meant to launch in firefox to work properly
This is the code I have to check that, but for some reason it doesn't want to work properly
The filepath is correct which was the first thing I thought of
Can anyone assist?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="opener_files/opener.css" media="screen" type="text/css">
<script type="text/javascript">
function codeAddress(){
if (browserName = "Internet Explorer");
var shell = new ActiveXObject("WScript.Shell");
shell.run('"Firefox" "file:///Mel19a001ppn/transfer/L&D_LT&S/SimonW/Sean/DEBT T1 Re-design/SD_Debt_Systems_Introduction/intro.html"');
}
window.onload = codeAddress;
window.setTimeout(CloseMe);
function CloseMe()
{
window.open('','_parent','');
window.close();
}
</script>
</head>
</html>
Edit:
I played around with it some more, and got this to run and launch firefox
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="opener_files/opener.css" media="screen" type="text/css">
<script type="text/javascript">
function codeAddress(){
if (navigator.userAgent.indexOf("MSIE") != -1 ) {
var shellApp = new ActiveXObject("Shell.Application");
var commandtoRun ="C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe";
shellApp.ShellExecute(commandtoRun,"","", "open", "3");
}
}
window.onload = codeAddress;
window.setTimeout(CloseMe);
function CloseMe()
{
window.open('','_parent','');
window.close();
}
</script>
</head>
</html>
That opens firefox properly but now I can't work out how to load the filepath that I have
Any ideas?
You can get the installation path of FireFox from the Windows Registry, like so:
var shell = new ActiveXObject("WScript.Shell"),
cVer = shell.RegRead('HKLM\\SOFTWARE\\Mozilla\\Mozilla Firefox\\currentVersion'),
FF = '"' + shell.RegRead('HKLM\\SOFTWARE\\Mozilla\\Mozilla Firefox\\' + cVer +'\\Main\\PathToExe') + '"';
And then try to run FireFox:
shell.Run(FF + ' "\\\\Mel19a001ppn\\transfer\\L&D_LT&S\\SimonW\\Sean\\DEBT T1 Re-design\\SD_Debt_Systems_Introduction\\intro.html"');
I stripped down my code to a simple page including the flog plugin and jquery files, but am still unable to get the flot graphs to render in IE 7 and 8. I may be missing something, but I am using flot 8.1(7.0 worked fine).
I cut it down to a simple page with the what I assume are the necessary scripts. Thank you for any help you can provide!
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type='text/javascript' src='js/plugins/jquery/jquery-1.9.1.min.js'></script>
<script type='text/javascript' src='js/plugins/jquery/jquery-ui-1.10.1.custom.min.js'></script>
<script type='text/javascript' src='js/plugins/jquery/jquery-migrate-1.1.1.min.js'></script>
<script type='text/javascript' src='js/plugins/other/excanvas.js'></script>
<script type='text/javascript' src='js/plugins/flot/jquery.flot.js'></script>
<script type='text/javascript' src='js/plugins/flot/jquery.flot.stack.js'></script>
<script type='text/javascript' src='js/plugins/flot/jquery.flot.pie.js'></script>
<script type='text/javascript' src='js/plugins/flot/jquery.flot.resize.js'></script>
</head>
<body class="smw ssDark">
<div class="header">
<div id="chart_activity" style="height:500px;" >
</div>
</div>
<script>
$("document").ready(function(){
if($("#chart_activity").length > 0){
var stuff = [], contacts = [];
for (var i = 0; i < 7; i += 1) {
stuff.push([i, parseInt(Math.random() * 30)]);
contacts.push([i, parseInt(Math.random() * 30)]);
}
$.plot($("#chart_activity"), [ { data: stuff, label: "stuff"}, { data: contacts, label: "contacts"}], {xaxis: {show: true}, yaxis: { show: true}});
}
});
</script>
</body>
</html>
Edit: Forgot to mention, I get the following error in IE console:
SCRIPT5007: Unable to get property 'fillStyle' of undefined or null reference
excanvas.js, line 230 character 5
Sorry for coming back with the answer slowly. Apparently the downloaded version of excanvas that I had, was somehow different from the one the came with Flot. Once I switched them out everything worked fine in IE 7/8.
in Opera when I serialize an xml doc, it returns the string with the XML Declaration added to it. In Firefox and Chrome this dose not occur, and i would like Opera to return same results as Firefox and Chrome.
http://jsfiddle.net/superbDeveloper/Qst5e/9/ (JavaScript Code below)
JavaScript Code
//test xml serializer
var s = new XMLSerializer();
var d = document;
var str = s.serializeToString(d);
console.log("1) serializeToString ");
console.log(str);
Results in Firefox
1) serializeToString
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> <title> - jsFiddle demo by superbDeveloper</title> <script src="/js/lib/mootools-core-1.4.2-full-nocompat.js" type="text/javascript"></script> <link href="/css/normalize.css" type="text/css" rel="stylesheet" /> <link href="/css/result-light.css" type="text/css" rel="stylesheet" /> <style type="text/css"> </style>.....
Results in Opera
1) serializeToString
<?xml version="1.0"?><html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title> - jsFiddle demo</title>
<script type="text/javascript" src="/js/lib/mootools-core-1.4.2-full-nocompat.js"/>
<link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="/css/result-light.css"/>
<style type="text/css">
</style>...
Notice the XML Declaration <?xml version="1.0"?> has being added in Opera browser. Is there a way of stoping Opera from adding the XML Declaration? or how can one remove the XML Declaration? I thought of using substring but its not really an elegant solution.
Well, at this point what you have is a string, so using string methods is as elegant as it gets :)
I'm not aware of any other way to do it.
This problem is only in non-IE browser. Use documentElement solution.
xmlData = jQuery(xmlData);
var oSerializer = new XMLSerializer();
if (typeof xmlData[0].documentElement !== 'undefined') {
var xmlString = oSerializer.serializeToString(xmlData[0].documentElement);
} else {
var xmlString = oSerializer.serializeToString(xmlData[0]);
}
I am currently hacking together a calendar application which I am embedding into a website via an iframe, but I have come across a bug in internet explorer
function BuildListView(startday, l, events, config){
var cc = '<div id="myGrid" style="width:95%;height:95%;"></div>';
var html = [];
html.push(cc);
html.push('<link rel="stylesheet" href="../slickgrid/slick.grid.css" type="text/css" media="screen" charset="utf-8" /> ');
html.push('<link rel="stylesheet" href="../slickgrid/css/smoothness/jquery-ui-1.8.2.custom.css" type="text/css" media="screen" charset="utf-8" /> ');
html.push('<link rel="stylesheet" href="../slickgrid/examples/examples.css" type="text/css" media="screen" charset="utf-8" /> ');
html.push('<script language="JavaScript" src="../slickgrid/lib/jquery.event.drag-2.0.min.js"></script>');
html.push('<script language="JavaScript" src="../slickgrid/slick.grid.js"></script>');
gridcontainer.html(html.join(""));
html = null;
var grid;
var columns = [
{id:"event", name:"Event", field:"event",width:300},
{id:"start", name:"Start", field:"start",width:175},
{id:"finish", name:"Finish", field:"finish",width:175},
{id:"location", name:"Location", field:"location",width:200}
];
function sortByStart(a, b) {
var x = a.start.toLowerCase();
var y = b.start.toLowerCase();
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
var options = {
enableCellNavigation: false,
enableColumnReorder: false,
rowCssClasses: function(item) {
// if a task is 100% done then its row gets an additional CSS class
return (item.event == "Task 0") ? 'complete' : '';
}
};
$.getJSON("../cal.php", function(json) {
var data = [];
var i=0;
$.each(json.events, function(index, event) {
data[i++] = {
event: event[1],
start: event[2],
finish: event[3],
location: event[9],
};
});
data.sort(sortByStart);
$.each(data,function(index, value){
value.start = (new Date(value.start)).toUTCString();
value.finish = (new Date(value.finish)).toUTCString();
})
grid = new Slick.Grid($("#myGrid"), data, columns, options);
});
}
Dirty I know, this works fine loaded by itself and in iframes in FF/Chrome but in IE the final call
grid = new Slick.Grid($("#myGrid"), data, columns, options);
Is causing problems. The same thing happens when I comment out the CSS files so I'm assuming it's a post load CSS error. What would stop the CSS in an iframe being altered?
Have you checked your DOCTYPE? Some DOCTYPEs trigger Standards mode in FF/Chrome but Quirks mode in IE8. SlickGrid doesn't work in Quirks mode (not surprisingly!). I just fixed a very similar problem by changing this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
See this article for more info.