Author: Abdullah Yahya

Here are some useful Javascript libraries. I hope to update this list with time.

• jQuery
• jQuery Tools
• underscore.js
• sprite.ly
• modernizr
• jquery.transit
• Meteor

Many websites and blogs including this one contains code meant to be displayed to readers. While there are several plugins for prettifying source code for display, the best one I’ve just come across is called Google-Code-Prettify. I will soon be adding it to this blog. Learn more at

http://code.google.com/p/google-code-prettify/

When developing a website, you often find yourself doing a lot of the same coding. Here are two nice HTML, CSS, and Javascript framework to get your going quickly.

FOUNDATION
http://foundation.zurb.com/

BOOTSTRAP
http://twitter.github.com/bootstrap/index.html

In addition, don’t forget to check out these HTML5 boilerplates which can come in pretty handy.

http://html5boilerplate.com/

http://html5boilerplate.com/mobile

Let’s say you have a form and you want to prevent the default action of submitting the form from occurring when the submit button “submit” event is triggered. After the default action is prevented, however, you want the default action to occur. You can do that as follows:

$("form").submit(function(e) {
	e.preventDefault();
	/*  do something */
	$('form').unbind('submit').submit();
});

Sometimes, people get confused over how to lay out their pages using CSS table-less code. Here are some common page layouts with their corresponding code.

https://www.abdullahyahya.com/table-less-page-layouts.html

When developing a web form, it’s always nice to provide users with the instant feedback of invalid form fields that you get with Javascript client-side form validation. However, some users may not have Javascript enabled and therefore you must have server-side form validation no matter what. This often results in two sets of form validation code for the same form. To simplify your code and maximize code reuse, you can use jQuery Tools Form and power your client-side form validation use your server-side validation rules. Following is an example:

Continue reading Javascript Client-Side Form Validation Using Server-Side Form Validation

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. The special thing about a callback is that functions that appear after the “parent” can execute before the callback executes. Another important thing to know is how to properly pass the callback. This is where I have often forgotten the proper syntax.

Callback without arguments

For a callback with no arguments you pass it like this:

[cc lang=”javascript”]
$.get(‘myhtmlpage.html’, myCallBack);
[/cc]

Note that the second parameter here is simply the function name (but not as a string and without parentheses). Functions in Javascript are ‘First class citizens’ and so can be passed around like variable references and executed at a later time. Continue reading Javascript Callbacks and Functions

Most people are used to seeing their code run sequentially but with Javascript, some code runs asynchronously. This can produce some confusing results. There are 2 cases when code would run asynchronously:

1. when making an AJAX call, e.g. $.ajax, $.getJSON, $.getScript, etc
2. when an “event” occurs, e.g. on load, on click, on blur, etc

In the first case, if you make an AJAX request, that initiates an http request which may take some time to complete. Here’s an example:

[cc lang=”javascript”]
var a = 0;

$.getJSON(‘somefile.json’, function(data)  {
a = 2; // this block of code executes on success and is the same as the following “success” callback
}
.success(function(data) {
a = 2;
})
.error(function() {
a = 3;
})
.complete(function() {
a = 4;
});

console.log(a);
[/cc]

Continue reading Asynchronous Javascript / Order of Execution

Recently, I need to write a script that depended on JSON. While I tried to remove whitespace where not needed, I missed one space and apparently that broke my code. I found out about it using JSONLint which is a nice tool for testing your JSON code.

[cc lang=”javascript”]
// load jquery UI CSS theme
$(“head”).append(“”);
var css = $(“head”).children(“:last”);
css.attr({
rel: “stylesheet”,
type: “text/css”,
href: “//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/themes/smoothness/jquery-ui.css”
});

// load jquery UI and if available, run autocomplete
if (typeof jQuery().ui === ‘undefined’ || jQuery.ui === null) {
$.getScript(“//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/jquery-ui.min.js”, function() {
loadJobTitles();
});
}
else {
loadJobTitles();
}
[/cc]