jQuery: “missing : after property id” Error

I didn’t realize how rusty one could get in just a week!

This is the code I was trying to use — a function I’ve used hundreds of times — and I kept getting the “missing : after property id” error.

$(document).ready({
});

Did you catch it? Neither did I ;-)

Well, according to the jQuery API the .ready() function takes a function — do you see my error now?

$(document).ready(function() {
});

Kudos to user113716 for [indirectly] pointing out my flaw, and with that silly bug I’m off to get another cup of caffeine.

Nick

HTML and JavaScript: Safari and Loading Files

Today I experienced an odd issue with Safari. It appears as though the HTML attribute defer=”defer” is not translated by Safari. Below are two examples of code. The former was what worked in every major browser except Safari. The latter works in all browsers that I have tested.

<script type=”text/javascript” defer=”defer” src=”/js/file2.js”></script>
<script type=”text/javascript” defer=”defer” src=”/js/file3.js”></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
<script type=”text/javascript” defer=”defer” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js”></script>
<script type=”text/javascript” defer=”defer” src=”/js/file1.js”></script>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js”></script>
<script type=”text/javascript” defer=”defer” src=”/js/file1.js”></script>
<script type=”text/javascript” defer=”defer” src=”/js/file2.js”></script>
<script type=”text/javascript” defer=”defer” src=”/js/file3.js”></script>

The reason that the former was in that order was because of the way that Zend loads files via prependFile() and appendFile(). Using the proper combination of the two functions, I was able to get them into the desired order.

Nick

JavaScript: Defining Arrays in Succession

Quite literally two hours later and I finally figured out how JavaScript handles defining arrays in succession. The issue was that I was getting the same values for array’s defined in succession — aka on the same line — even though they had different index names.

Below is an example of my code:

var $array = new Array();
$array[0] = $array[1] = new Array();

$array[0][0] = ‘hello’;
$array[0][1] = ‘world’;

console.log($array[0][0]); // ‘hello’
console.log($array[1][0]); // ‘hello’

The underlining issue with this code is that when defining array’s in succession the array indices will share the same memory reference; in PHP — my native language — it defines a separate memory reference for each array.

Nick

JavaScript: The simple difference between jQuery’s bind() and live()

This morning I am delving into some JavaScript code, and decided once and for all to find out what exactly the difference was between the two functions: bind() and live(). It turns out, there is a very minor but important difference.

According to the jQuery API documentation, bind( action, function ) is used to give an event to all existing matches. On the other hand, live( action, function ) not only gives the event to all existing matches, but all future matches.

So, concluding my thoughts, if you are doing work where you are adding a lot of things to the page — i.e. using AJAX — that need to have an existing action handler applied to them, then you should stick with live(). Otherwise, learn to love bind().

Nick

JavaScript: Bug using .focus() for legacy coding and FF

Hopefully you have found this article before you bashed your head open with your keyboard; if not, please seek medical help before continuing.

When using the .focus() method today, I came across an issue with Firefox — though, I would assume it is for all legitimate browsers. If you are having trouble getting .focus() working, kindly apply the following code.

setTimeout( function(){document.getElementById('field').focus();}, 10 );

Unfortunately, I have no reason why it works, I merely know that it does work.

Nick