Posts Tagged ‘html


Listbox Picker using Javascript

This page is about creating an HTML Switchlist or Picker using Javascript.


Listbox pickers are 2 listboxes with left move and right move buttons in between them. Items in each listbox can be added or removed from each other.


  • Basic Text Editor
  • HTML Browser


In order to accomplish this the 2 lists are displayed as html select elements. Each item on the list is an option element. When the user clicks on one of the 2 buttons a javascript call is made.

The javascript is responsible for moving selected items from the source to the target select element. The javascript function goes thru the following  process.

  1. Create a temporary arrays and a map for the source and target select boxes.
  2. Copy all the elements from the target listbox to the target temp array
  3. Copy all the selected items from the source listbox to the temp target array.
  4. Copy all the unselected elements from the source listbox to the source temp array.
  5. Clear out the listboxes and regenerate them using the target and source arrays.
  6. Assign the values of each element using the map structure.
<script language="JavaScript" type="text/JavaScript">
function moveItems(srcSelect, targetSelect) {
	var srcTmpArr = new Array();
	var targetTmpArr = new Array();
	// map type structure that stores the value of a entry given its display text.
	var valStoreMap = new Array();
	var i;
	// iterate thru the target select box and store all the values and
	// display text into a Map type structure. All values because this
	// is the target.
	for (i = 0; i < targetSelect.options.length; i++) {
		// need to hold on to value of item so we load up the map with value from target.
		valStoreMap[targetSelect.options[i].text] = targetSelect.options[i].value;
		targetTmpArr[i] = targetSelect.options[i].text;
	// get the length of the target Arr that we populated above.
	// this is faster than doing a targetLength++ each time in the loop.
	var targetLength = targetTmpArr.length;

	// next we start working on the source array. This is tricky since
	// the selected items in the list will need to be MOVED over to
	// the target array. Unselected items remain behind.

	// start from a fresh source array.
	var srcLength = 0;
	// iterate thru the source structure and store all the values.
	for (i = 0; i < srcSelect.options.length; i++) {
		// need to hold on to value of item so we load up the map with value from source.
		valStoreMap[srcSelect.options[i].text] = srcSelect.options[i].value;

		// if something in the source is selected and its not blank then
		// copy it to the target Temp Array.
		if (srcSelect.options[i].selected && srcSelect.options[i].value != "") {
			targetTmpArr[targetLength] = srcSelect.options[i].text;
		} else {
			// else just add it to the source Temp array as if nothing happend.
			srcTmpArr[srcLength] = srcSelect.options[i].text;
	// reset the source and target select boxes to prepare them for copy.
	srcSelect.length = 0;
	targetSelect.length = 0;

	// populate the select boxes with the new values from the temp arrays.
	var i;
	for (i = 0; i < srcTmpArr.length; i++) {
		var optionItem = new Option();
		// lookup the value of the option Item from the map
		optionItem.value = valStoreMap[srcTmpArr[i]];
		optionItem.text = srcTmpArr[i];
		srcSelect[i] = optionItem;
	for (i = 0; i < targetTmpArr.length; i++) {
		var optionItem = new Option();
		// lookup the value of the option Item from the map
		optionItem.value = valStoreMap[targetTmpArr[i]];
		optionItem.text = targetTmpArr[i];
		targetSelect[i] = optionItem;

function selectAll(box) {
	for (var i = 0; i < box.length; i++) {
		box[i].selected = true;

The following is the code to generate the 2 listboxes and the buttons between them.

		<table border="0" cellspacing="2" cellpadding="0">
			<tr align="center" valign="middle">
				<td align="right"><select name="FirstList" size="15" multiple
					id="FirstList" style="width: 250">
					<option value="A">Bob</option>
					<option value="B">Ted</option>
					<option value="C">John</option>
					<option value="D">Greg</option>
					<option value="E">Steve</option>
					<option value="F">Mike</option>
				<td><input type="button"
					value="<<" style="height:50"> <input type="button"
					value=">>" style="height: 50"></td>
				<td align="left"><select name="SecondList" size="15" multiple
					id="SecondList" style="width: 250">
			<tr align="center" valign="middle">
				<td colspan="3"><input type="submit" name="Submit"
					value="Submit" style="width: 250" class="button"

One thing to note here is that when the form submits all items on the second list are selected. This is the only way the items will be submitted as part of the form.

Thats all for now.


column sorting using JSF and Tomahawk

This page describes the process of sorting results generated by a JSF based application.




Not 100% sure if the following is needed in web.xml or not. Just here for reference.

        <description>Set the size limit for uploaded files.
            Format: 10 - 10 bytes
                    10k - 10 KB
                    10m - 10 MB
                    1g - 1 GB

<!-- extension mapping for adding <script/>, <link/>, and other resource tags to JSF-pages  -->
    <!-- servlet-name must match the name of your javax.faces.webapp.FacesServlet entry -->
    <servlet-name>Faces Servlet</servlet-name>

<!-- extension mapping for serving page-independent resources (javascript, stylesheets, images, etc.)  -->

Programming the JSP

Ensure that you have the following taglib in each JSP.

<%@ taglib uri="" prefix="t" %>

Example Page

Notice in the following example the h: tags are converted to t: tomahawk tags. Also observe the highlighted lines below.

<%@ taglib prefix="f" uri="" %>
<%@ taglib prefix="h" uri="" %>
<%@ taglib prefix="tiles" uri=""  %>
<%@ taglib uri="" prefix="t" %>

<f:subview id="genre_tile">

    <h3>Genre Table</h3>

    	<t:dataTable styleClass="data_table" value="#{genreBean.allGenre}" var="genre">
    		<t:column sortable="true">
    		    <f:facet name="header">
		        	<h:outputText value="id" />
    			<h:outputText value="#{}"/>
    		<t:column sortable="true">
    		    <f:facet name="header">
		        	<h:outputText value="Name" />
    			<t:outputText value="#{}"/>
		<h:commandButton value="Submit" action="#{genreBean.process}"/>

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 77 other followers

November 2017
« Oct    

Blog Stats

  • 842,358 hits