MDBitz Development Resources

Javascript Cookies are variables that are stored on the visiting users computer. These cookies are unique to a domain so that if the site www.example.com sets a cookie with information in it that cookie can not be read and utilized by www.xyz.com. In most cases cookies are used to save user settings for your website, when they last logged in, etc. However they should not be used to store sensitive information as the cookie information is transferred with each page request to the server.

With that out of the way lets get right into things, and understand the 3 things that define your cookie value.

• Name: The name to identify your cookie
• Value: The value to be stored in the cookie
• Expiration Date: When does this cookie value expire

The cookie is set and read by using JavaScript and in particular the document.cookie element of the DOM. You set a cookie by setting document.cookie to your desired name-value pair and expiration date with the format of “name=value; expires=date;”. For example if we wanted to define a cookie with the property user and set it to abc123 with an expiration day of March 3s^st

document.cookie ='user=abc123; expires=Wed, 31 Mar 2010 20:47:11 UTC;

To access the saved cookie we would read out the value of document.cookie. This property returns a string representation of all the name-value properties that have been set to the cookie. Therefore you will need to parse the returned String to get your desired value. The easiest way to do this is to get the indexOf method to get the starting point of the property value and get the value up to the next semi-colon or end of the string if one doesn’t exist.

To help illustrate lets assume I have set a cookie with user = abc123 and settings = Show All. If a cookie was set with these properties then document.cookie would return the following.

user=abc123; settings=Show All

Therefore to get the user property you would need to get the index of user= and return the string from that index plus its length until the next ; or end of the cookie value if user was the last property.

start_idx=document.cookie.indexOf("user=");
cookie_value = "";
if (start_idx != -1)
{
    start_idx=start_idx+ 6;
    end_idx=document.cookie.indexOf(";" , start_idx);
    if (end_idx == -1) {
        end_idx = document.cookie.length;
    }
    cookie_value = document.cookie.substring(start_idx, end_idx);
}
alert(cookie_value);

To make things easy on yourself, there are a lot of existing functions and libraries that have defined methods for reading and writing cookies. W3Schools has an excellent set of functions at www.w3schools.com/JS/js_cookies.asp. In addition many JavaScript libraries either have built in cookie support or plugins for handling them.

For those of us that have applications that require the uploading of files, our work has just gotten easier. Earlier this month the folks of moxiecode (tinymce) released the first version of their File Uploading tool Plupload.

This handy tool enables users to utilize Flash, Silverlight, HTML5, and other web assets for handling and displaying the progress of the files being uploaded. In addition it also contains handlers for resizing images on the client side before the file is transmitted over to your server. An interesting tool that you definitely want to review before creating your own file upload tool. Check out the Plupload official site to learn more.

In Dynamic websites we often find that we need to modify page content on the fly based on user actions. A common example of this is allowing the user to add additional input boxes for configurations or attachments. I personally like to contain such input as a new row in a table. To accomplish this I utilize the jQuery library for JavaScript.

For illustration lets assume we have the following table in our page:

<table id="exampleTable1">
<tr>
    <th>City</th><th>State</th>
</tr>
<tr>
    <td>Rochester</td><td>New York</td>
</tr>
<tr>
    <td>Boston</td><td>Massachusetts</td>
</tr>
</table>

In this example the approach to adding more columns is very straightforward as we can utilize jQuery’s child and last selectors with the after modifier to add a new table row.

var newRow = '<tr><td>Albany</td><td>New York</td></tr>';
$('#exampleTable1 tr:last').after(newRow);

These 2 lines of JavaScript create the new row as a string then utilizes jQuery to get the last row of the table and append the new row after it, adding this row to the end of our table.

If a table contains a tfoot element with rows then the above will insert a row in the footer, A modification that can be done is to obtain the tbody element of the table and append the new row.

$('#exampleTable1 tbody').append(newRow);

That is all there is to it simply define your new row as a string then utilize jQuery to identify where you would like that row added to the DOM.

Often as a User we don’t want to use our mouse or tab to the submit button to submit a form on a Web page, instead we may just want to press the enter key on our keyboard. This functionality can be easily completed by performing a bit of JavaScript, personally I find that utilizing JQuery makes the task even easier.

Enabling Enter Button to Submit a Form

To enable the enter button for a form we will create a javascript function that check when a key is pressed when an input element of the form is in focus. This function can then either submit the form or call another javascript function to validate the form.

1. First lets we will start by defining our start-up function that will setup the appropriate keydown handlers on the input fields.

   $(document).ready( function() {
       // code from step 2
   }

2. Second we will need to set the keydown handler for all input fields in our form including select and radio fields. JQuery provides a shortcut selector :input to select these elements.

   $('#formID :input').keydown(function(e) {
       // code from step 3
   }

3. Now time to fill out the logic of the function called when the enter key is pressed. First we will want to verify that we have the event to do this we can check if e is null and get the window.event instead. To shorten this we can simply use the || operator.

   var event = e || window.event;

   Next we check if the key pressed was the enter button by use of the keyCode property.

   if( e.keyCode == 13) {
       // action here
   }

4. The last step is simply put in the action logic whether it is calling a validation script:

   return validateForm();

   or submitting the form directly

   document.formName.submit();

Full Sample Script

$(document).ready( function() {
    $('#myForm :input').keydown(function(e) {
        var event = e || window.event;
        if (e.keyCode == 13) {
           return validateForm();
        }
    });
});

Resources

• JQuery – offical website

Want to add Search Capabilities to your website and don’t know where to start? Then Google AJAX Search API might be for you. The AJAX Search API provided by Google enables you to embed a search box into your web pages and display the results in your webpage in your own desired format and style. The perhaps nicest thing about utilizing the API is that it is free and does not require an account unlike Google’s Site Search that costs a minimum of $100 a year. However if you do sign up then if errors are encountered while retrieving your search results Google has the ability to notify you so that the issue can be resolved.

To get started Google provides documentation, examples, and even a code playground that has multiple examples that you can customize in place to view the results.

• Search AJAX API – Main Site
• Search AJAX API – Documentation
• Search AJAX API – Examples
• Search AJAX API – Code Playground