Pure-Essence.Net » javascript

jQuery.each vs Javascript for loop

pureessence — Fri, 02 Sep 2011 21:31:15 +0000

Being a big jQuery fan, I use jQuery.each method a lot in my Javascript code. Until recently I didn’t think too hard what jQuery.each really is.

Its description says it’s an iterator but it certainly is NOT a true iterator.

For example:

Let me know what you expect the code below to return.

var myVars = ['foo1', 'foo2', 'foo3'];

function containsValue(myValue, myCollection) {
	jQuery.each(myCollection, function(i, val) {
		if(val == myValue) {
			return true;
		}
	});
	return false;
}

$(document).ready(function() {
	console.log(containsValue('foo2', myVars));
});

Before I know better, I’d expect it to return true. Since myCollection DOES CONTAIN the value ‘foo2′. However the function containsValue WILL ALWAYS RETURN FALSE. That’s because when you return out of jQuery.each, it simply exits out of jQuery.each but not the containing function. In fact, whether you do anything in the callback function at all, jQuery.each ALWAYS RETURNS the collection you pass in.

e.g.

var returnedVar = jQuery.each(myVars, function(i, val) {});
console.log(returnedVar === myVars); // evaluates to true

In my opinion, jQuery.each acts more like a closure than an iterator. Sure you may use it as an iterator as long as you not returning anything. If you are just changing behaviors or collecting information, it will mimic an iterator. But you need to know, it really is not an iterator.

Personally I’m going to start to use Javascript’s native for..in statement instead of jQuery.each for Javascript collection variables. There is also an argument that jQuery.each may never perform faster than the native support for an iterator. Therefore below I will rewrite the function above using for..in.

function containsValueWithFor(myValue, myCollection) {
	for (index in myCollection) {
		if(myCollection[index] == myValue) {
			return true;
		}
	}
	return false;
}

console.log(containsValueWithFor('foo2', myVars)); // true

var myMap = {'lala':'foo1', '2':'foo2', 'b':'foo3'};

console.log(containsValueWithFor('foo2', myMap)); // true as well for an object/map

—>Example code<—

QUnit – test your javascript

pureessence — Sun, 24 Jul 2011 16:28:06 +0000

After over ten years of javascript programming, I’m finally seriously considering writing at least unit tests for my javascript. Since I’m such a big fan of jQuery, QUnit seems like the obvious choice.

It’s sad but better late than never.

The truth is, in my opinion, the fact that javascript test frameworks do not yet maturely work with many of the continuous integration software deters programmers from using them. What’s the point of unit testing if they don’t automatically get run? Based on my research, JSUnit is the only one that integrates with ANT innately. But JSUnit is more of an abandomware now so people are looking for alternatives.

QUnit + CI topics

>> Run my test suite <<

QUnit simple example:

HTML:




	Test Suite
	
	
	
	
	

	
	
	



	QUnit example
	
	
	
	

	
	test markup, will be hidden

Source javascript file:

function isEven(val) {
	return val % 2 === 0;
}

function startsWith(data, startsWithStr) {
	data = jQuery.trim(data);
	startsWithStr = jQuery.trim(startsWithStr);
	if(data) {
		return data.toUpperCase().lastIndexOf(startsWithStr.toUpperCase(), 0) === 0;
	} else if(data === startsWithStr) {
		return true;
	} else {
		return false;
	}
}

Sample test file:

$(document).ready(function(){

	module("startsWithTest");

	test('startsWith', function() { 
		ok(startsWith("ll-925", "ll-"), 'Starts with ll-'); 
		ok(!startsWith("ll-925", "xl-"), 'Does not start with xl-'); 
		ok(!startsWith("", "xx-"), 'Does not start with xx-'); 
		ok(startsWith(" xx-sdgj ", "xx-"), 'Trimming test: starts with xx-'); 
		ok(startsWith(" xx-sdgj", " xx- "), 'Trimming test 2: starts with xx-'); 
		ok(startsWith("", " "), 'Empty string starts with empty string'); 
		ok(startsWith("Mn-u59", "mN-"), 'Non case sensitive test'); 
//		raises(startsWith(foo, " "), 'Undefined test 1');  // undefined is obviously not considered a normal exception
	}) 

});

>> git repo for the source <<

Additional resources:

Firebug command line

pureessence — Tue, 12 Jan 2010 23:39:57 +0000

If you do any javascript programming at all, you absolutely need to get the firebug plugin for firefox. It’s by far the best free tool out there. I’ve had the plugin since it first came out. However, I just learned about its command line feature today when I was reading this peeling away jQuery wrapper post.

How did I miss such any important new feature? Once you can get auto updates for plugins for firefox, you stop visiting the plugin site. So you don’t really pay attention to all of its new features. I am however extremely happy to learn about it today.

jQuery tip: Did you know you could prevent an event from executing more than once by doing

$("#someAnchorId").one("click", function(){
    //implementation
});

Javascript Error: submit is not a function

pureessence — Wed, 15 Oct 2008 18:13:35 +0000

Just my luck and I ran into the dreaded submit is not a function javascript error.

Here’s the scenario.

While coding javascript along, you get a form via id or name on your html page and calls the submit() function on it. You think it should just behave as expected (submits the form) instead nothing happens and in firebug, you get a submit is not a function error. You are like WTF is going on? You start to wonder if you remembered the syntax correctly so you do some research and all the pages tell you yes it’s just submit() and nothing else.

Finally you start to search on the error “submit is not a function” you get to this page and you learned:

The reason was the statement “formObj.submit();” in the javascript was colliding (resulting in ambiguity within the browser) with the form button, which was also named “submit”.

So just rename the element within the form tag that is named “submit” will fix the problem.

Here’s an example.

HTML:

Javascript:

function submitForm() {
  document.getElementById('search').submit();
}

gives “submit is not a function” error.

Change HTML to:

jQuery plugin – tableRowCheckboxToggle

pureessence — Tue, 26 Feb 2008 20:58:41 +0000

So since I’ve been playing with jQuery on my spare time while putting together an ajax site, I’ve decided to tackle a design issue I’ve run into many times at work with jQuery. This idea originally comes from phpMyAdmin. If you’ve used that software, you know that when you click on any table row, it automatically toggles the checked state of the checkbox in the first cell. I think that’s an extremely user friendly thing to have since checkboxes are so small and hard to click on.

Let me present you my friends, my first jQuery plugin. It generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or css classes in the script. In addition to the phpMyAdmin function, I added an initialization step in the script that correctly marks a row when it’s considered checked on page load.

tableRowCheckboxToggle

It generically adds the toggle checkbox function to any table rows you specify based on the css class names.
It will by default toggle any checkboxes within the table row.
You can manually exclude checkboxes based on name, id or css classes in the script.
If there is any applicable checkboxes inside of the table row that are checked, it will apply a class to the table row.
It also marks table rows when there are checked applicable checkboxes on page load.

Download version 1.0

Live demonstration

jQuery plugin tableRowCheckboxToggle