This post part of a series and will make more sense if you read the earlier posts:
jQuery
In this post I want to start working on the client side interactivity for our example form. To do this I am going to use a JavaScript library called jQuery. The homepage for the library has the following description:
jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.
The library makes JavaScript programming much more enjoyable and can be as small as 15kb for the user to download (assuming a minified, Gzipped library). I'm going to use jQuery in my example and provide a brief explanation but for learning the library in more depth you can start by referring to the documentation and tutorials on their site.
To get started we need to include the library in our page. I have also added a file for my own JavaScript code.
<head runat="server">
<title>Examples - Order Form</title>
<script src="jquery-1.2.3.min.js" type="text/javascript"></script>
<script src="OrderForm.js" type="text/javascript"></script>
</head>
Adding Rows Dynamically
As I hinted at in the previous post I am going to provide a way to add rows to the form dynamically so that we do not have to guess how many items the user wants to order. The basic idea is to provide a template row that will be cloned when we want to create more rows. The following JavaScript provides a simple implementation of this:
var tbody;
var template;
function AddRows(count) {
for(var i = 0; i < count; i++) {
tbody.append(template.clone());
}
}
$(document).ready(function() {
tbody = $('tbody');
template = $('tr', tbody).clone();
AddRows(4);
});
The first thing to understand about jQuery is that it extends objects with a lot of useful functionality such as the clone function we are using. The most common way to get an object with this additional functionality added is using the global syntax which uses the same syntax as CSS to locate objects in the HTML DOM:
You can also use other CSS selectors such as a period to select items by class or has to select items by ID. This is very powerful and deals with all of the cross browser compatibility issues for you.
The ready function registers for an event that will fire when the page is loaded and the table is ready to be modified. In our ready function we locate the tables body and the row that is described in the HTML. We use the clone method to make our own copy of the row and store it away for later. We then call the AddRows function to add another 5 rows to our initial form.
The AddRows function simply loops the requested number of times and uses the jQuery append function to add another clone of our template row to the tables body.
Wiring It Up
Other than linking to the JavaScript files in the head tag we have added dynamic rows to our form without modifying the HTML in any way. The JavaScript files should be downloaded once and cached which gives us a nice saving in bandwidth as a bonus.
We can now provide a button on our form for the user to add as many rows to the form as they like:
<input type="button" id="addRows" value="Add Rows" />
To keep functionality nicely separated from my markup I'm going to add code to the ready function which wires up the call to AddRows:
$(document).ready(function() {
$('#addRows').click(function() {
AddRows(5);
});
...
We use the ID of the input tag to locate it as there is only one. click is an event that jQuery will call for us when the button is clicked and each time it will call our AddRows function adding another 5 rows to the table.
Next Time
As you can see with a basic knowledge of JavaScript it requires very little code to improve a form a great deal. Next time I will look at doing something a little more advanced and use jQuery's AJAX to provide feedback on the codes that the user is entering.
Labels: ASP.Net, HTML, jQuery, Style
04/05/2008 04:01 AM (UTC -07:00)