bvstone

Creating a Select List with jQuery, BlockUI and eRPG

Posted:

Creating a Select List with jQuery, BlockUI and eRPG

We recently had a situation when working with a client where we had an application that would assign work tickets to a customer for work that needed to be performed.

Because our customers are set up with the possibility of having multiple phone numbers, we needed a way when sending a dispatch to an employee for the ticket to include one of the phone numbers.

We were already using BlockUI for a lot of our dialogues so we looked into how to do things this way and found these instructions which helped us formulate a solution.

So, the first thing we needed to do is on the page that we allow the sending of a dispatch was to create an invisible DIV container with the customer phone numbers.  When done, the list will look like this:

<div id="phoneQuestion" style="display:none;"> 
Which Customer Phone Number would you like to assign to this ticket? <br><br>
<table class="scroll" cellpadding="2" cellspacing="0" border="0">
	<tr>
		<td class="phoneNumber" id="1" data-number="4456" data-type="wireless" data-default="y">4456 (Wireless) <span class="red">Default</span></td>
	</tr>
	<tr>
		<td class="phoneNumber" id="2" data-number="123" data-type="home" data-default="">123 (Home) </td>
	</tr>
	<tr>
		<td class="phoneNumber" id="3" data-number="5440" data-type="wireless" data-default="">5440 (Wireless) </td>
	</tr>
	<tr>
		<td class="phoneNumber" id="4" data-number="789" data-type="fax" data-default="">789 (Fax) </td>
	</tr>
</table>
</div>

This list is easily created with our eRPG program that lists phone numbers and is inserted into the page with a simple server side include statement:

<div id="phoneQuestion" style="display:none;"> 
Which Customer Phone Number would you like to assign to this ticket? <br><br>
<!--#include virtual="/cgi-bin/l.phn?cstid=/%cstid%/" -->
</div>

Now comes the fun part... the jQuery!  When the user clicks on the Dispatch icon we want to display the select list if there is more than one phone number associated with the customer.

	$('.sendDispatch').off('click').on('click', function(e) {
		
		if ($('.phoneNumber').length > 1) {
			showConfirmWindow('Please Select',$('#phoneQuestion')); 

			$('.phoneNumber').off('click').on("click", function(e){  
				phoneNumber = $(this).data('number');
				$.unblockUI({onUnblock : function(){showDispatchConfirm();}});		
			}); 
		} else {

			if ($('.phoneNumber').length == 1) {
				phoneNumber = $('.phoneNumber').data('number');
			}
			
			showDispatchConfirm();
		}

	});

You'll notice we have a showConfirmWindow() function that really is just a wrapper for a specific BlockUI call:

function showConfirmWindow(title, message) {
	$.blockUI({
		theme : true,
		title : title,
		message : message,
		width : '85%',
		timeout : 0,
		themedCSS : {
			width : '30%',
			top : '30%',
			left : '30%',
			position : 'absolute'
		}
	});	
}

You'll also see a showDispatchConfirm() call which is just a simple Yes/No confirmation window to confirm that the user wants to submit this ticket dispatch. 

Because we assign a class of "phoneNumber" to each phone number in the list we can easily count how many there are using the .length method.  If there is more than one phone number we'll display a list of phone numbers to select from, as shown below:

Once the phone number is selected, that value can be passed onto the dispatch program so when the dispatch request arrives on the employee's mobile device, they will know which phone number to use if they need to contact the customer.

The finished product can be seen here.


Last edited 02/09/2015 at 14:57:37



Latest Posts:

GreenTools For G Suite (G4G) v12.00 Released With Base OAuth 2.0 Functionality GreenTools For G Suite (G4G) v12.00 Released With Base OAuth 2.0 Functionality
Posted by July 28, 2019
BVSTools >> BVSTools Announcements >> GreenTools for G Suite (Google Apps) (G4G) Specific Announcements
BVSTools Small Price Increase in 2020 BVSTools Small Price Increase in 2020
Posted by July 26, 2019
BVSTools >> BVSTools Announcements
GreenTools for Vertex Cloud (VTXCLOUD) Now Available GreenTools for Vertex Cloud (VTXCLOUD) Now Available
Posted by July 22, 2019
BVSTools >> BVSTools Announcements >> GreenTools for Vertex Cloud (VTXCLOUD) Specific Announcements
GreenTools for Google Apps (G4G) - Drive Addon Successfully Verified by Google GreenTools for Google Apps (G4G) - Drive Addon Successfully Verified by Google
Posted by July 22, 2019
BVSTools >> BVSTools Announcements >> GreenTools for G Suite (Google Apps) (G4G) Specific Announcements
Why I Cancelled my DynDNS Service and How I Replaced It with an IBM i Application Why I Cancelled my DynDNS Service and How I Replaced It with an IBM i Application
Posted by July 17, 2019
IBM Power Systems >> (QGPL) IBM i
Green Tools for G Suite (G4G) Product Updates (Licensing, Functionality, Base Product) Green Tools for G Suite (G4G) Product Updates (Licensing, Functionality, Base Product)
Posted by July 13, 2019
BVSTools >> BVSTools Announcements >> GreenTools for G Suite (Google Apps) (G4G) Specific Announcements
Reading JSON Data from Standard Input With YAJL and RPG Reading JSON Data from Standard Input With YAJL and RPG
Posted by July 12, 2019
Programming >> Proof of Concept (POC)
MAILTOOL Updated to Allow Use of IBM Global Security Kit (GSKIT) for SSL/TLS Communications MAILTOOL Updated to Allow Use of IBM Global Security Kit (GSKIT) for SSL/TLS Communications
Posted by June 19, 2019
BVSTools >> BVSTools Announcements >> eMail Tool (MAILTOOL) Specific Announcements
GETURI v10.00 Released Supporting IBM Global Security Kit (GSKIT) and Server Name Indication (SNI) GETURI v10.00 Released Supporting IBM Global Security Kit (GSKIT) and Server Name Indication (SNI)
Posted by June 11, 2019
BVSTools >> BVSTools Announcements >> Get URI (GETURI) Specific Announcements
BVSTools Now Offers Vertex Cloud Interface BVSTools Now Offers Vertex Cloud Interface
Posted by April 15, 2019
BVSTools >> BVSTools Announcements
Token Has an Invalid Signature Error for Office 365 Email Token Has an Invalid Signature Error for Office 365 Email
Posted by March 22, 2019
BVSTools >> BVSTools Software Discussion >> GreenTools for Microsoft Apps (G4MS) Specific Discussion
Resending Emails that have Errored Out with Updated Router or Authentication Information Resending Emails that have Errored Out with Updated Router or Authentication Information
Posted by March 1, 2019
BVSTools >> BVSTools Software Discussion >> Email Tools (MAILTOOL) Specific Discussion
BVSTools Offers Toolset to Work With HubSpot OAuth 2.0 APIs On Your IBM i BVSTools Offers Toolset to Work With HubSpot OAuth 2.0 APIs On Your IBM i
Posted by January 27, 2019
BVSTools >> BVSTools Announcements
G4MSDRV Currently Not Supported G4MSDRV Currently Not Supported
Posted by January 17, 2019
BVSTools >> BVSTools Announcements >> GreenTools for Microsoft Apps (G4MS) Specific Announcements
Removing Trailing Carriage Returns and/or Line Feeds from a String with RPG Removing Trailing Carriage Returns and/or Line Feeds from a String with RPG
Posted by December 26, 2018
Programming >> RPG Programming

Reply




Copyright 1983-2019 BVSTools
GreenBoard(v3) Powered by the eRPG SDK, MAILTOOL Plus!, GreenTools for Google Apps, jQuery, jQuery UI, BlockUI, CKEditor and running on the IBM i (AKA AS/400, iSeries, System i).