Programming4us
         
 
 
Programming

jQuery 1.3 : Working with numeric form data (part 9) - The finished code

12/19/2010 4:12:20 PM

The finished code

Taken together, the code for the shopping cart page is a mere 80 lines—quite small considering the functionality it accomplishes, but especially so when we take into account the breezy style that the code has acquired for optimum readability. Many of the lines in jQuery could have been merged, were we particularly concerned with number of lines, because of jQuery's chainability. At any rate, here is the finished code for the shopping cart page, which concludes this chapter on forms:

$(document).ready(function() {
var stripe = function() {
$('#cart tbody tr').removeClass('alt')
.filter(':visible:odd').addClass('alt');
};
stripe();
$('#recalculate').hide();
$('.quantity input').keypress(function(event) {
if (event.which && (event.which < 48 ||
event.which > 57)) {
event.preventDefault();
}
}).change(function() {
var totalQuantity = 0;
var totalCost = 0;
$('#cart tbody tr').each(function() {
var price = parseFloat($('.price', this)
.text().replace(/^[^\d.]*/, ''));
price = isNaN(price) ? 0 : price;
var quantity =
parseInt($('.quantity input', this).val(), 10);
var cost = quantity * price;
$('.cost', this).text('$' + cost.toFixed(2));
totalQuantity += quantity;
totalCost += cost;
});
$('.subtotal .cost').text('$' + totalCost.toFixed(2));
var taxRate = parseFloat($('.tax .price').text()) / 100;
var tax = Math.ceil(totalCost * taxRate * 100) / 100;
$('.tax .cost').text('$' + tax.toFixed(2));
totalCost += tax;
$('.shipping .quantity').text(String(totalQuantity));
var shippingRate = parseFloat($('.shipping .price')
.text().replace(/^[^\d.]*/, ''));
var shipping = totalQuantity * shippingRate;
$('.shipping .cost').text('$' + shipping.toFixed(2));
totalCost += shipping;
$('.total .cost').text('$' + totalCost.toFixed(2));
});
$('<th>&nbsp;</th>')
.insertAfter('#cart thead th:nth-child(2)');
$('#cart tbody tr').each(function() {
$deleteButton = $('<img />').attr({
'width': '16',
'height': '16',
numeric form data, working withshopping cart page code'src': '../images/cross.png',
'alt': 'remove from cart',
'title': 'remove from cart',
'class': 'clickable'
}).click(function() {
$(this).parents('tr').find('td.quantity input')
.val(0).trigger('change')
.end().hide();
stripe();
});
$('<td></td>')
.insertAfter($('td:nth-child(2)', this))
.append($deleteButton);
});
$('<td>&nbsp;</td>')
.insertAfter('#cart tfoot td:nth-child(2)');
});
$(document).ready(function() {
var editShipping = function() {
$.get('shipping.php', function(data) {
$('#shipping-name').remove();
$(data).hide().appendTo('#shipping').slideDown();
$('#shipping form').submit(saveShipping);
});
return false;
};
var saveShipping = function() {
var postData = $(this).serialize();
$.post('shipping.php', postData, function(data) {
$('#shipping form').remove();
$(data).appendTo('#shipping');
$('#shipping-name').click(editShipping);
});
return false;
};
$('#shipping-name').click(editShipping);
});


Other -----------------
- The Art of SEO : Controlling Content with Cookies and Session IDs
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 5) - The Freehand Tool
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 4) - The Ellipse and Rectangle Tools
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 3) - The Line Tool
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 2) - The Pencil Tool
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 1)
- Security-As-a-[Cloud] Service : Today’s Offerings
- CSS for Mobile Browsers : CSS Sprites
- CSS for Mobile Browsers : Common Patterns (part 4)
- CSS for Mobile Browsers : Common Patterns (part 3) - Titles and Pseudoclasses
- CSS for Mobile Browsers : Common Patterns (part 2) - Rounded corners
- CSS for Mobile Browsers : Common Patterns (part 1) - Absolute and floating positions
- iPad SDK : New Graphics Functionality - The Basic Drawing Architecture
- jQuery 1.3 : Compact forms (part 6)
- jQuery 1.3 : Compact forms (part 5)
- jQuery 1.3 : Compact forms (part 4)
- jQuery 1.3 : Compact forms (part 3)
- jQuery 1.3 : Compact forms (part 2) - AJAX auto-completion
- jQuery 1.3 : Compact forms (part 1) - Placeholder text for fields
- The Art of SEO : Duplicate Content Issues (part 3)
 
 
Most View
- SharePoint 2010 : Use the Datasheet View to Add, Edit, or Delete Items and Files
- Recovering from a Disaster in an Exchange Server 2010 Environment: Identifying the Extent of the Problem (part 1)
- Required Project Images for iPad Apps
- Optimizing an Exchange Server 2007 Environment : Analyzing and Monitoring Core Elements
- Exchange Server 2010 : Manage Permissions (part 2) - Delegate Role-Based Permissions
- DirectX 10 Game Programming : Shaders and Effects - Effect Files
- Discovering the Microsoft Azure Platform
- Handling Input on Windows Phone 7 : Touch Input (part 2) - Raw Touch with Mouse Events
- Windows Server 2008 : Using dnscmd - Adding DNS Zones, Creating and Deleting DNS Records
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 5) - The Freehand Tool
Top 10
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 3) - Configuring Recipient Filtering
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 2)
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 1)
- Implementing Edge Services for an Exchange Server 2007 Environment : Installing and Configuring the Edge Transport Server Components
- What's New in SharePoint 2013 (part 7) - BCS
- What's New in SharePoint 2013 (part 6) - SEARCH
- What's New in SharePoint 2013 (part 6) - WEB CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 5) - ENTERPRISE CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 4) - WORKFLOWS
- What's New in SharePoint 2013 (part 3) - REMOTE EVENTS