Exercises for Customizing Vendor Systems

Chapter 10: jQuery Examples

OPAC Holdings Table

Many OPAC holdings tables are not designed for quick scanning by users. But with JavaScript, we can fix this. Here is the sample holdings table from Chapter 7.

<table class="bib_items">
	<tbody>
		<tr class="bibItemsHeader">
			<th width="38%" class="bibItemsHeader">Location</th>
			<th width="38%" class="bibItemsHeader">Call No.</th>
			<th width="24%" class="bibItemsHeader">Status</th>
		</tr>
		<tr class="bibItemsEntry">
			<td width="38%">Mary Idema Pew - 3rd Floor</td>
			<td width="38%">PS3562.E353 G6 2015</td>
			<td width="24%">DUE 09-17-15 +2 HOLDS</td>
		</tr>
		<tr class="bibItemsEntry">
			<td width="38%">Steelcase Popular Reading</td>
			<td width="38%">PS3562.E353 G6 2015 c.2</td>
			<td width="24%">AVAILABLE</td>
		</tr>
		<tr class="bibItemsEntry">
			<td width="38%">Mary Idema Pew - Popular Reading (1st Floor)</td>
			<td width="38%">PS3562.E353 G6 2015 c.3</td>
			<td width="24%">DUE 10-07-15</td>
		</tr>
	</tbody>
</table>

The following code scrapes the data from the table and builds a new <ul> element with the data. It also changes the styles of the availability statement depending on whether the item is currently available or not.

var newList = '<ul id="availability-list">';
$('table.bib_items').find('tr.bibItemsEntry').each(function() {
	// Save content to variables
	var location = $(this).find('td:first').text();
	var callNo = $(this).find('td:nth-child(2)').text();
	var availability = $(this).find('td:last').text();
	var avail_classes="availability unavail";
	if(availability.indexOf('AVAILABLE') > -1) {
		avail_classes="availability avail";
	}

	// Build new list item, append to newList
	newList += '<li><span class="' + avail_classes + '">' + availability + '</span> <span class="location">' + location + '</span> <span class="callno">' + callNo + '</span></li>';
});
newList += '</ul>';
$('table.bib_items').css('display','block').html(newList);

ILL Registration Form

Below is the drop-down <select> element we use in Illiad to allow users to change default pickup locations. The three letter code at the top in generated automatically by Illiad.

<label for="NVTGC">Preferred Pickup Location</label>
<select id="NVTGC" name="NVTGC">
  <optgroup label="Current pickup location">
    <option value="<#PARAM name="NVTGC">" selected><#PARAM name="NVTGC"></option>
  </optgroup>
  <optgroup label="Select new pickup location">
    <option value="LIB"> Mary Idema Pew Library @ Allendale</option>
    <option value="STEEL">Steelcase Library @ DeVos</option>
    <option value="FREY">Frey Learning Center @ CHS</option>
  </optgroup>
  <optgroup label="Distance Education?">
    <option value="OCS">Ship Books to me</option>
  </optgroup>
</select>

We want to change the text of the three letter code to something understandable by our users, so we can use this JavaScript to run a set of conditionals against the selected value:

$('option:contains("LIB")').text('Mary Idema Pew Library @ Allendale');
$('option:contains("STEEL")').text('Steelcase Library @ DeVos');
$('option:contains("FREY")').text('Frey Learning Center @ CHS');
$('option:contains("OCS")').text('Ship Books to Me');

Sometimes we need to hide an address until it is needed. Try running the following code in the console, and then select "Ship Books to Me" from the <select> above:

$('#address-fields').hide();
$('select#NVTGC').on('change', function() {
	if($(this).val() == 'OCS') {
		$('#address-fields').slideDown(400);
	} else {
		$('#address-fields').slideUp(400);    
	}
});

We found that many of our users on mobile devices expected to have a "clear" button on each <input> to make it easier to clear out the contents of a field. Below are the First and Last Name fields from a form.

<label for="FirstName">First Name</label>
<input id="FirstName" name="FirstName"type="text" value="Matthew">
<span class="FirstName-clear"></span>

<label for="LastName">Last Name</label>
<input id="LastName" name="LastName" type="text" value="Reidsma">
<span class="LastName-clear"></span>

To add the clear buttons, we can run the following code in the console. It also applies the styles to the page that position the buttons properly.

$('.clear-button-example').find('input[type="text"]').each(function() {
	var inputID = $(this).attr('id');
	$("#" + inputID + "-clear").addClass('clear-button').text('X').click(function() {
		$('input#' + inputID).val('');
		$('input#' + inputID).focus();
	});
});