Size of dictionary in jquery

One would think that they can apply size of length function directly and get it, but its little more than that. You can not apply the length property or size function, both only works with list.

Dict is an Object and it doesn't have size method, and if you do length it will give 'undefined'.

Solution - Get the array of keys and perform length.

e.g.
> dictObj = Object {PointA: Array[23], PointB: Array[23]}
> Object.keys(dictObj).length
> 2

Note - It won't works > IE8

Other robust way is as described in this SO answer, add size function on Object and use it across the app and it will work cross browser.

Short answer is there is no built-in way.

jquery event on addClass or show/hide

Its often require to fire some event when new class is getting added to the element, or when element is moving from hidden state to visible state or otherwise.

I come across similar scenario while rendering graph using jqplot library. Though if you have div hidden and you try to plot the graph on it, it won't display the graph when you make the parent variable visible. In similar situation it requires replot (which is basically redraw of the element.)

As there is no 'hide' event in DOM, so we will not be able to bind the event. Other way to resolve this issue is by Javascript MutationObserver. In which you can select target node (element) and observer instance.

Though you can find many complex solution on web, here is the simple and neat way to do it using jQuery.

Lets say you have element with class 'xyx', and upon making it to visible you would like to fire few more calls and refresh certain things on the page. You can do it using trigger -

$(".xyz").show();
$("xyz.").trigger('cssClassChanged');

The similar calss cssClassChanged needs to be listen somewhere that its been triggered, so its almost like publisher - subscriber model. Here is the sample -

$('.xyz').bind('cssClassChanged', function(){ perform your steps });


Easy and simple solution.

jQuery Wizard Options

Recently I worked on a piece where we needed wizard like functionality, and I did little bit searching on different wizard options available in jQuery. Here are some of the options available with some comments. 

You can use the one which suits your requirements -


http://techlaboratory.net/smartwizard
- Demo, user registration, validation, detailed


http://www.wbotelhos.com/stepy/
- Validations, Style



http://jquerytools.org/demos/scrollable/wizard.html
- Good, you might need to change the styles etc.


http://www.noveltheory.com/Wizard/
- very basic

https://github.com/jackkeller/jquery-stepwizard
- Step wizard, again basic one

http://thecodemine.org/#

Addition to this if you are planning to do more along with wizard functionality like registration form etc, I would recommend to use sisyphus.js. Its provides auto-save google docs/gmail like feature which leverage HTML5 - local storage to prevent your work when you accidentally close or refresh the page.

Null Check in different language

Python - Null Check

15 or "default"       # returns 15
0 or "default"         # returns "default"
None or "default"    # returns "default"
False or "default"    # returns "default"

Django Template - None Check


{{obj.item_value|default_if_none:"smile"}}

C# - Null Check

var data = val ?? "default value";

Java - Null check

Foo f = new Foo();
DummyObj obj = new Obj().getSelection();
String str = obj != null ? f.format(obj) : "";

Javscript - Null/Undefined check

if (! param) param = "abc";
//other way to check this
if (param == null) is same as if(!param)


jQuery - Null/existence check

if ( $('#myDivObj').length ) {}

Feel free to add comments and other languages Null check mechanism (inline or explicit)