We Keep Coding

Draggable/Sortable nesting issue (error in onDragStart)

I'd like to both drag the row of items as well as the items itself, within the same or across different rows. It works until I try to move the last item of a row which then results in an error.
jsfiddle:
https://jsfiddle.net/lexixon/nf97erqx/64/
Error:
Uncaught TypeError: Cannot read property 'element' of null
at VueComponent.onDragStart (vuedraggable.js:380)
at mt.<anonymous> (vuedraggable.js:37)
at Ct (Sortable.min.js:3)
at mt._dragStarted (Sortable.min.js:3)
Uncaught TypeError: Cannot read property 'index' of null
at VueComponent.onDragRemove (vuedraggable.js:403)
at mt.<anonymous> (vuedraggable.js:37)
at Ct (Sortable.min.js:3)
at mt._onDrop (Sortable.min.js:3)
at mt.handleEvent (Sortable.min.js:3)

TypeError: null is not an object (evaluating '*')

For the below code:
var item = cartModel.getlist()[index];
if((item.isDepo()) {
// Some code
} else if(!permission.hasPermissionToVoidSKU()) {
// Some code
} else if(item.sku.indexOf(mposConstants.RESTOCK_FEE_SKU) > -1){
// Some code
}
I'm getting this error:
TypeError: null is not an object (evaluating 'item.sku.indexOf')
If item object is null, the error is something different (see below). In what scenario will this error be thrown?
Update:
If item.sku is null, the error is:
[FATAL] [] [-] ["TypeError: Cannot read property 'indexOf' of null
If item is null, the error is:
[FATAL] [] [-] ["TypeError: Cannot read property 'isDepo' of null

The reason for the different error messages is quite simply that they are produced by different browsers. The error is the same (sku on the object item is null).
Given the following code
<script>
var item = {sku: null};
item.sku.indexOf("");
</script>
here is some error messages for different browsers:
Firefox: TypeError: item.sku is null
Firefox Developer Edition: TypeError: item.sku is null, can't access property "indexOf" of it
Opera: TypeError: Cannot read property 'indexOf' of null
at example.html:3
Safari: TypeError: null is not an object (evaluating 'item.sku.indexOf')
To get the error message you have gotten, item must be defined as an object, and sku must be set to null. If sku were undefined, you would have gotten an error message like this (Safari): TypeError: undefined is not an object (evaluating 'item.sku.indexOf'). If item was null, you would have gotten something like this: TypeError: null is not an object (evaluating 'item.sku').

Based on this answer and others, it sounds like you're getting that error because a function is called before the DOM element it references or acts upon has been loaded.
In the snippet of code you provided, I don't see a direct reference to any DOM elements, but I would suggest calling your script after your HTML has finished rendering (i.e. by putting any <script> tags at the end of your HTML, or by using a $(document).ready() call if you use jQuery).

Undefined variable error for already defined variable

Variable bodydata is already declared in function myfunction.This variable is then passed to another function createPDFTable but in createPDFTable function....it is giving an error as :
"uncaught TypeError: Cannot read property 'push' of undefined".......AT line 129
Variable bodydata which is being passed to function createPDFTable is treated as undefined.Why and how to rectify this?
Fiddle link is -> https://jsfiddle.net/o8L3p0kk/

Uncaught TypeError: Cannot read property 'focus' of undefined

This issue is occurring when my page loads.
Using the following scripts
-jquery.simplemodal-1.4.3.js
-jquery v1.7.1
Below is a small code snap, of the code inside simplemodal where this error is occuring.
focus: function (pos) {
var s = this, p = pos && $.inArray(pos, ['first', 'last']) !== -1 ? pos : 'first';
// focus on dialog or the first visible/enabled input element
var input = $(':input:enabled:visible:' + p, s.d.wrap);
setTimeout(function () {
input.length > 0 ? input.focus() : s.d.wrap.focus();
}, 10);
},
Any Ideas that i could do to resolve this would be great

This is an old question and the original poster has probably resolved his concrete issue.
But the general questions related to the Error Messages:
Uncaught TypeError: Cannot read property '...' of undefined
Uncaught TypeError: Cannot read property '...' of null
and
Uncaught TypeError: Cannot set property '...' of undefined
Uncaught TypeError: Cannot set property '...' of null
are still important for many peoples and have a simple and general answer:
The object of that we try to read property, set property or call a function
- is not declared or
- is declared, but not defined or
- is null
Simple test code in Google Chrome
<script type="text/javascript">
// object obj is not declared, there is no previos 'var obj;'
obj.prop; // Uncaught TypeError: Cannot read property 'prop' of undefined
obj.prop = "value1"; // Uncaught TypeError: Cannot set property 'prop' of undefined
obj.func(); // Uncaught TypeError: Cannot read property 'func' of undefined
// ------------------------------------------------------------------------
// object 'obj' is declared with:
var obj;
// but it is not defined, there is no value assigned to it (obj = 5 or something else)
obj.prop; // Uncaught TypeError: Cannot read property 'prop' of undefined
obj.prop = "value1"; // Uncaught TypeError: Cannot set property 'prop' of undefined
obj.func(); // Uncaught TypeError: Cannot read property 'func' of undefined
// ------------------------------------------------------------------------
// object 'obj' is declared and defined. Value is null
var obj = null;
obj.prop; // Uncaught TypeError: Cannot read property 'prop' of null
obj.prop = "value1"; // Uncaught TypeError: Cannot set property 'prop' of null
obj.func(); // Uncaught TypeError: Cannot read property 'func' of null
// ------------------------------------------------------------------------
// object 'obj' is declared and defined
var obj = {prop: "propertyValue", func: function() {return "returnValue"}}
// there are no errors
</script>
The same code in Firefox:
// object obj is not declared, there is no previos 'var obj;'
obj.prop; // Uncaught TypeError: obj is undefined
obj.prop = "value1"; // Uncaught TypeError: obj is undefined
obj.func(); // Uncaught TypeError: obj is undefined
-----------------------------------
// object 'obj' is declared with:
var obj;
// but it is not defined, there is no value assigned to it (obj = 5 or something else)
obj.prop; // Uncaught TypeError: obj is undefined
obj.prop = "value1"; // Uncaught TypeError: obj is undefined
obj.func(); // Uncaught TypeError: obj is undefined
-----------------------------------
// object 'obj' is declared and defined. Value is null
var obj = null;
obj.prop; // Uncaught TypeError: obj is null
obj.prop = "value1"; // Uncaught TypeError: obj is null
obj.func(); // Uncaught TypeError: obj is null
-----------------------------------
// object 'obj' is declared and defined
var obj = {prop: "propertyValue", func: function() {return "returnValue"}}
// there are no errors
So there are some differences in the Error Message between browser, but the massage is clear:
The object in not defined or null.
In the general case it is easy to understand what exactly the error message means.
But why this happens in concrete cases?
The reasons could by many, but the important ones could be:
Calling a function or accessing a property
before it is initialized/defined
These could happen, if an object (popup, modal), created on the fly, is not ready yet.
after it is destroyed
Structure changes by using new versions of an API, where a property or function was
renamed or
moved to other objects
By using loops on arrays: the index don't exist, because of
bad incrementation/decrementation or
bad condition
How to debug?
Find on which object and where the error is thrown
Read the documentation to assure that,
try using the object on the right place,
have called all needed functions, before using the object
Look in the scope/function if the object is defined,
If not, look in the stacktrace in its caller(s)...

TypeError: 'null' is not an object

This is my Prototype / JS code:
if($('myElemId')) {
myVar = $('myElemId').checked;
}
This is the error I get in Safari: TypeError: 'null' is not an object (evaluating '$('myElemId').checked')
Why is that and why is it only coming up in Safari? Do I get it right that the selector returns null and thus the checked state cant be fetched?