Sorting through the holidays

Just wanted to make a quick blog post before I go gorge myself for Thanksgiving. The sort Function is nothing you haven't seen before but important enough that I at least wanted to touch on it. It basially takes an array and goes over the contents and then passes them to your function in pairs. In the event that your function returns 1, the sort function will swap the items and place the second one first. If your function returns -1, then the first item will be first. In the event the function returns 0, sort will not do anything to the items passed from the array.

A word of caution. It is usually best to convert the values to lowercase so that all sorts are case insensitive. This can make your code cleaner and less prone to bugs.

When we map objects

It is important to note that we are often passing key/value pair objects to jQuery methods. We can often see this when we are passing multple options to a method. FOr example a statement like:


$('div').css({color:'red', padding: '5px'});

Is just a jQuery method (in this case css) that takes key/value mapped pairs. These mapped pairs can be processed even further so that we can use them in functions or widgets.

By mapping objects we can access them by using the period operator (.), which allows us to use the key's associated value. This makes it fairly simple to handle values the same way that we use arrays.

Just serialize me

Often when you are building a website you are offering up some type of content. Occasionally, though you need to capture some end user data and one of the tried and true methods of the world wide web is to use forms to do that. Most forms have some type of format similar to this example:

<form name="someForm" action="somePage.asp" method="post">
 <input name="someField" type="text" />
 <input name="aField" type="text" />
 <input type="submit" name="submit" />
</form>

This is just a simple form that submits two fields of text. With a simple javascript variable you can grab all form fields and by using the handy serialize method you can convert all your form data into a query string.

var someJavascriptVariable = $("#someForm").serialize();

If you prefer to use JSON or some similar type of format you an call the serializeArray method. This returns an object containing the key and value pairs of all your form data.

var someJavascriptVariable = $("#someForm").serializeArray();

You can then combine this with the $.post method to submit your data to a database.

$.post(this.someURL, someJavascriptVariable, function() { alert("submitted!"); });

I added a callback at the end that gives is a pop-up message letting us know that the form has been submitted.

To template or not to template, this is the question

Often when we use some type of AJAX component we are often using the html action to replace part of or all of some elements of the DOM with new elements. Now you can code it for each piece of content in your page or you can take advantage of populating your elements with data when you need it. For example lets suppose we have a next week calculator.

<div id="calculator">
 <p>Next week will be <span id="numDays">0</span> number of days from beginning of the moth</p>
</div>

now with the following jQuerywe can update the text of these containers:

$(this).find('#numDays').text(getNumberOfDays());

We have made the part of the HTML page that will change updateable via client-side templating. The rest of the div tag wil not change and only the number of days will change based on when and where the page is rendered. This can be done for each element and allows for us to leave all the markup in the HTML where it belongs and allows for us to use datasources that can be pulled using AJAX or injected directly via a scripting language.

the UI Dialog

If you haven't already used the jQuery UI Dialog component, I highly recommend it. It is a completely resizable and modifiable dialog box that can have a variety of transition effects. Let use a simple div tag:

<div id="uiDialog" title="some dialog box">
  <p>Here is some sample dialog text</p>
  <p>Some more dialog text</p>
</div>


then in our javascript we can create a dialog using:

$('#dialog').dialog({
  autoOpen: true,
  height: 300,
  modal: true,
  resizable: false
});

With this simple code you can create a custom dialog box. The contents are just the content of the HTML itself so all normal markup elements like links and images are fair game inside a separate dialog box. It may not seem that special but when you need to display separate content this is a very useful tool.