Develop Reference

Code works in Codepen but not when called with index.html

https://codepen.io/mdaw11/pen/rNMbdqd
Created this little issue tracker for public use, works fine in Codepen, however once I try to open it in Chrome browser, the console outputs error
'Uncaught TypeError: Cannot read property 'length' of null
at fetchIssues (main.js:71)
at onload ((index):10)'
This tells me that there is something wrong with my fetchIssues(); perhaps var issues = JSON.parse(localStorage.getItem('issues')); isn't outputting what I expect it to be?
Any help would be much appreciated!

Could be fetchIssues() is being executed too early and could also happen if you don't have anything saved to the localStorage yet. Also double check what localStorage.getItem('issues') returns.
To fix that error you could try something like:
var issues = JSON.parse(localStorage.getItem('issues') || '[]');

HTML5 Drag&Drop - Event handling with jQuery

So I've stumbled upon this a several times and now I'm finally fed up with this topic. Searching and googleing about it confuses me every time and now I'll need to ask by myself here.
I'm up to implement native HTML5 drag&drop in a web app. It works fine in Chrome and in IE too (at least when I tried last time).
The problem now is, that event binding via jQuery wont work out properly in Firefox, whereas it does so in Chrome! This is my Code:
$(document).on('dragstart','.leistung', function(){
cedamed.handlers.dragElement(event);
});
And this is my handler:
this.dragElement = function(event){
var dataObj = {};
dataObj.category = event.target.getAttribute('class');
dataObj.description = event.target.getAttribute('description');
dataObj.code0 = event.target.getAttribute('code0');
dataObj.code1 = event.target.getAttribute('code1');
dataObj.code2 = event.target.getAttribute('code2');
event.dataTransfer.setData('Text',JSON.stringify(dataObj));
console.log("dragging");
};
Works in Chrome, Firefox gives me the following error:
ReferenceError: event is not defined
It points to the line with:
cedamed.handlers.dragElement(event);
I have come across 'solutions' that involved the originalEvent-property of the event api, which is often supposed to make everything work fine in FF, but it does not at all in my case. I made it work by setting the 'ondragstart'-attribute directly in the HTML, but shouldnt it work with 'jQuery.on'?
I'm sorry, there are several questions to this topic out there, but I just dont get whats going wrong in this field. Can you please give me an insight, whats wrong in here?

I found out I have to pass 'event' as an argument to the jQuery callback function in 'on' such as:
$(document).on('dragstart','.leistung', function(event){
cedamed.handlers.dragElement(event);
});
With usage of originalEvent in 'drageElement' I made it work finally. Sorry...

event.toElement is undefined with onbeforedeactivate under IE9

I'm trying to access the event.toElement property when the beforedeactivate event occurs, but it is returning undefined under IE9. It seems to work under IE8. The code below is an example of what I am trying to do:
$('#myButton').bind('beforedeactivate', myHandler);
function myHandler(event)
{
var target = event.originalEvent.toElement;
}
Can't seem to find much information on this issue so I was wondering if someone can explain why this is happening or suggest a workaround for the problem?

Console is undefined error in IE9

I have a graphics page which shows SVG graphics. I am using Raphael graphics framework. The page displays properly in Firefox, Also if the F12 developer tools is set 'on' in IE9 it works fine.
The map show partial data (its a node link diagram and it shows only one child node out of 12 nodes) in IE9 if the F12 developer mode is set off and application is started with browser cache cleared (simulating a general user).
Update: I kept the Debugger on and Shows me the error "Console is undefined". So I think its not a graphics rendering issue, and also I am not using the console explicitly, maybe the mindmap js is using it internally, but how to again get rid of this issue?
Update:
I found the issue and commented out the console.log entries from the js files.
Thanks.

Probably your code or the code you are calling is using console.log or something like it.
You could add this code in the global scope to create a dummy wrapper for IE (or any browser that doesn't support it). Just put the following code somewhere before you call any other libraries:
if(!(window.console && console.log)) {
console = {
log: function(){},
debug: function(){},
info: function(){},
warn: function(){},
error: function(){}
};
}

The problem is that your js code calls sometime a console method, for example 'console.log', but your browser does not have console (or has it closed);
To fix this, add this (once) before including any of your scripts:
//Ensures there will be no 'console is undefined' errors
window.console = window.console || (function(){
var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear = c.exception = c.trace = c.assert = function(){};
return c;
})();
This will create a 'pseudo' console only if it doesn't exist, so that 'console is undefined' error will go away.
Hope this helps.
Cheers

Do you have a console.log() or console.error() call in your code?

"undefined handler" from prototype.js line 3877

A very niche problem:
I sometimes (30% of the time) get an 'undefined handler' javascript error on line 3877 of the prototype.js library (version 1.6.0.2 from google: http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js).
Now on this page I have a Google Map and I use the Prototype Window library.
The problem occurs in IE7 and FF3.
This is the info FireBug gives:
handler is undefined
? in prototype.js#3871()prototype.js (line 3877)
handler.call(element, event);
I switched to a local version of prototypejs and added some debugging in the offending method (createWraper) but the debugging never appears before the error...
I googled around and found 1 other mention of the error on the same line, but no answer so I'm posting it here where maybe, some day someone will have an answer :).

I just found out this error also occurs if you accidentally leave on the parenthesis on your observer call:
Event.observe(document, 'myapp:application_ready', myapp.MyClass.initApp());
instead of
Event.observe(document, 'myapp:application_ready', myapp.MyClass.initApp);

This will probably cause an error:
Event.observe(myElement, 'click', myFunction(myParameters));
You should do it like this instead:
Event.observe(myElement, 'click', function() { myFunction(myParameters) });

I switched to a local version of prototypejs and added some debugging
in the offending method (createWraper) but the debugging never appears
before the error...
Actually the offending function being called when the error occurs is "wrapper" which is created inside createWrapper (but not called there). Basically what is happening is that you've attached a function as the event handler for an element, and the function doesn't actually exist.
If you're trying to put any debug information in to try and pinpoint which function "doesn't exist" then add your alert messages or firebug console output inside the wrapper function between lines 3871 and 3878.

Really simple solution for “undefined handler” from prototype.js error in Prototype is just... fix prototype. I found advice here: https://prototype.lighthouseapp.com/projects/8886/tickets/407-ie7-i8-report-handler-is-null-or-not-an-object and it's actually working.
Just find line with:
handler.call(element, event);
and replace with
if (handler) handler.call(element, event)
problem solved with prototype 1.6.0.3 and latest :)