NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMWindow.alert]

Tags: , ,

This is a common error in Firefox. It is logged in console when you try to call on non existent DOM API method. Seeing this error message is very common with methods call to alert(), confirm(), drawImage() (canvas) and window.open(). You may think "how those methods could be 'non-existent'?", since they are standard APIs of the window object. Well, that's true, they can't, but consider the case when browser blocks your alert or pop-up windows. Firefox pop-up blocker will make those methods not available in that context and should silently carry on with the next statement, but instead it throws an error.

To solve this problem:

  • make sure you are calling methods on non-null objects;
  • remove alert(), confirm() or open() methods in unload event handler. FF pop-up blocker ignores all window.open() methods in the unload handler.

The flavours of the error message:

  • NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMWindow.alert]
  • NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMWindow.confirm]
  • NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]

At the time of writing the problem has not been fixed.

Dynamically change <title> using jQuery

Tags: , , ,

In this post I will show how to dynamically change document's title using JavaScript and jQuery. Browsing the web (and StackOverflow) I saw a lot of posts that say you can't do it using jQuery. Actually, there is a jQuery syntax that is basically a wrapper for javascript code (see below).

Note: just to clarify, by document title we mean the text that is displayed in the browser window or a tab.

The best way to change the document title is to use native javascript api document.title.

document.title = "New text set by JavasSript";

The equivalent jQuery code of js code above.

$(document).prop('title', 'New text set by jQuery');

Example

Let's say we need to change the tab title text when a user clicks on a button. Here is a jQuery code to do just that:

<html>
<head>
  <title>Initial page title</title>
  <script src="path-to/jquery.js"></script>
  <script>
    $(document).ready(function(){
      $('#clickme').click(function(){
        document.title = $(this).val();
        // jQuery syntax alternative
        // $("title").text( $(this).val() );
      });
    });
  </script>
</head>
<body>
  <input type="button" id="clickme" name="clickme" value="Click me!" />
</body>
</html>

To conclude, you are better off using document.title, because it is cross-browser and has performs better.

Alternative jQuery syntax has been tested in all major browsers.

The difference between == and === in jQuery/JavaScript

Tags: , , , ,

In this post I would like to explain the difference between double (==) and triple (===) equals in JavaScript/jQuery. A quick and short explanation is that == does type coercion (conversion) before checking for equality; and === does strict equation which requires values to have the same type as well.

Here is what it means:

0 == false     // true
0 === false    // false, because they have different types (int, bool)
1 == "1"       // true
1 === "1"      // false, because they have different types (int, string)
null == undefined // true
null === undefined // false

Detailed (longer) explanation

When you use == the javascript interpreter will convert one side of the comparison according to these rules:

  • When comparing a number and a string, the string is converted to a number value.
  • When comparing a boolean, the boolean is converted to 1 if it is true and +0 if it is false.
  • When object is compared with a number or a string, the object is converted to its’ default value (.valueOf(), .toString()). If these methods are missing a runtime error is thrown.
  • When comparing an object and another object, no type conversion is made. They are equal only if they refer the same object.

When you use === the javascript interpreter will not convert values to primitive types and make sure that the operands have the same value as well as the same type.

"foo" === "foo"  // true, both operands are of type String
new String("foo") === new String("foo")  // false, 2 Objects refer diff object instances

Detailed comparison information can be found on Mozilla Developer Network page. Here is the summary:

  • Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions
  • Two numbers are strictly equal when they are numerically equal (have the same number value). NaN is not equal to anything, including NaN. Positive and negative zeros are equal to one another
  • Two Boolean operands are strictly equal if both are true or both are false
  • Two distinct objects are never equal for either strictly or abstract comparisons
  • An expression comparing Objects is only true if the operands reference the same Object
  • Null and Undefined Types are == (but not ===)