Uncaught TypeError: Cannot read property 'focus' of undefined

Question

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

Answer 1

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)...