Programming4us
         
 
 
Programming

jQuery 1.3 : Working with numeric form data (part 7) - Deleting items

12/19/2010 4:07:37 PM

Deleting items

If shoppers on our site change their minds about items they have added to their carts, they can change the Quantity field for those items to 0. We can provide a more reassuring behavior, though, by adding explicit Delete buttons for each item. The actual effect of the button can be the same as changing the Quantity field, but the visual feedback can reinforce the fact that the item will not be purchased.

First, we need to add the new buttons. Since they won't function without JavaScript, we won't put them in the HTML. Instead, we'll let jQuery add them to each row:

$('<th>&nbsp;</th>')
.insertAfter('#cart thead th:nth-child(2)');
$('#cart tbody tr').each(function() {
$deleteButton = $('<img />').attr({
'width': '16',
'height': '16',
'src': '../images/cross.png',
'alt': 'remove from cart',
'title': 'remove from cart',
'class': 'clickable'
});
$('<td></td>')
.insertAfter($('td:nth-child(2)', this))
.append($deleteButton);
});
$('<td>&nbsp;</td>')
.insertAfter('#cart tfoot td:nth-child(2)');

We need to create empty cells in the header and footer rows as placeholders so that the columns of the table still line up correctly. The buttons are created and added on the body rows only:

Now we need to make the buttons do something. We can change the button definition to add a click handler:

$deleteButton = $('<img />').attr({
'width': '16',
'height': '16',
'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);

});

The handler finds the quantity field in the same row as the button, and sets the value to 0. Now, the field is updated, but the calculations are out of sync:

We need to trigger the calculation as if the user had manually changed the field value:

$deleteButton = $('<img />').attr({
'width': '16',
'height': '16',
'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');

});

Now the totals update when the button is clicked:

Now for the visual feedback. We'll hide the row that was just clicked, so that the item is clearly removed from the cart:

$deleteButton = $('<img />').attr({
'width': '16',
'height': '16',
'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();

});

While the row is hidden, the field is still present on the form. This means it will be submitted with the rest of the form, and the item will be removed on the server side at that time.

Our row striping has been disturbed by the removal of this row. To correct this, we move our existing striping code into a function so that we can call it again later. At the same time, we need to modify the code to ensure that our alternating row selection ignores any hidden rows. Unfortunately, even if we filter out all of the hidden rows, we still can't use the :nth-child(even) selector, because it will apply the alt class to all visible rows that are the "eventh" child of their parent. Let's see what happens when we apply the following modified code to four table rows when the second one is hidden:

$('#cart tbody tr').removeClass('alt')
.filter(':visible:nth-child(even)').addClass('alt');

We get the following markup [condensed]:

<tr> . . . </tr>
<tr style="display: none"> . . . </tr>
<tr> . . . </tr>
<tr class="alt"> . . . </tr>

Three rows are visible; only the fourth has the alt class applied to it. What we need is the :visible:odd selector expression, since it will choose every other row after removing the hidden ones for the selection (and it accounts for the shift from a one-indexed to a zero-indexed selector). Using :odd or :even could produce unexpected results if we had more than one<tbody> element, but in this case we're in good shape. With the selector change in place, our new function looks like this:

var stripe = function() {
$('#cart tbody tr').removeClass('alt')
.filter(':visible:odd').addClass('alt');
};
stripe();

Now we can call this function again after removing a row:

$deleteButton = $('<img />').attr({
'width': '16',
'height': '16',
'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();

});

The deleted row has now seamlessly disappeared:

This completes yet another enhancement using jQuery that is completely transparent to the code on the server. As far as the server is concerned, the user just typed a 0 in the input field, but to the user this is a distinct removal operation that is different from changing a quantity.

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
- BizTalk Server 2009 : The core principles of a service-oriented architecture (part 2)
- Programming Windows Phone 7 : Simple Clocks (part 1)
- Windows Phone 7 : Browsing the Web - Browsing Basics
- SQL Server 2005 : Managing XML Data (part 1)
- The Windows Sysinternals Web Site
- Windows 7 : Checking for Updates and Security Patchess
- Windows Server 2008 Server Core : The Command Line Made Easy
- Business Apps for Android & Windows Phone 7 : Handyscan, Outdoor Navigation, Pageonce Money& Bills, Glympse, Cool Tools
- Windows 7 : Setting Up User Security - Using the Guest Account to Give Folks Temporary Access
- Windows Server 2008 : Configuring Remote Access (part 2) - Network Policy Server and Network Access Protection
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