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:

MAILTOOL Updated to Allow G4GSMAIL as Option in Routers File MAILTOOL Updated to Allow G4GSMAIL as Option in Routers File
Posted by June 28, 2020
BVSTools >> BVSTools Announcements >> eMail Tool (MAILTOOL) Specific Announcements
BVSTools Now Offers Interface with Infor's ION APIs BVSTools Now Offers Interface with Infor's ION APIs
Posted by May 15, 2020
BVSTools >> BVSTools Announcements
More V7R4 IFS File CCSID Issues and The Fix More V7R4 IFS File CCSID Issues and The Fix
Posted by March 4, 2020
IBM Power Systems >> (QGPL) IBM i
Error Retrieving IP Address by Name Error Retrieving IP Address by Name
Posted by February 25, 2020
BVSTools >> BVSTools Software Discussion
Logging jobs that hit an outq Logging jobs that hit an outq
Posted by February 13, 2020
Programming >> CL Programming
GreenTools for Google Apps (G4G) v12.60 Released with Shared Drive Features and More... GreenTools for Google Apps (G4G) v12.60 Released with Shared Drive Features and More...
Posted by February 4, 2020
BVSTools >> BVSTools Announcements >> GreenTools for G Suite (Google Apps) (G4G) Specific Announcements
Allowing Requests over Port 80 For SSL Validation (ie, Namecheap, etc) Allowing Requests over Port 80 For SSL Validation (ie, Namecheap, etc)
Posted by January 31, 2020
Programming >> Web Programming
GreenTools for Slack (G4SLK) v3.00 Released GreenTools for Slack (G4SLK) v3.00 Released
Posted by January 17, 2020
BVSTools >> BVSTools Announcements >> GreenTools for Slack (G4SLK) Specific Announcements
Calling a QSH Command from RPG Calling a QSH Command from RPG
Posted by December 26, 2019
Programming >> RPG Programming
SPLTOOL Print Range (PRTRNG) Function Updated to Handle Spooled Files up to 999,999,999 Pages SPLTOOL Print Range (PRTRNG) Function Updated to Handle Spooled Files up to 999,999,999 Pages
Posted by December 14, 2019
BVSTools >> BVSTools Announcements >> Spooled File Tools (SPLTOOL) Specific Announcements
GreenTools for Microsoft Apps (G4MS) Updated to v6.00 - Now Uses Microsoft Graph APIs GreenTools for Microsoft Apps (G4MS) Updated to v6.00 - Now Uses Microsoft Graph APIs
Posted by November 24, 2019
BVSTools >> BVSTools Announcements >> GreenTools for Microsoft Apps (G4MS) Specific Announcements
V7R4 Changes CCSID of Compressed File Using PASE JAR Command - Here's The Fix V7R4 Changes CCSID of Compressed File Using PASE JAR Command - Here's The Fix
Posted by November 21, 2019
IBM Power Systems >> (QGPL) IBM i
Using GETURI to Make OAuth 2.0 Requests - Custom Headers for Access Tokens Using GETURI to Make OAuth 2.0 Requests - Custom Headers for Access Tokens
Posted by November 11, 2019
BVSTools >> BVSTools Software Discussion >> Get URI (GETURI) Specific Discussion
GreenTools for Microsoft Apps (G4MS) v5.00 Released with Updated OneDrive Support and 3rd Party Functionality GreenTools for Microsoft Apps (G4MS) v5.00 Released with Updated OneDrive Support and 3rd Party Functionality
Posted by October 20, 2019
BVSTools >> BVSTools Announcements >> GreenTools for Microsoft Apps (G4MS) Specific Announcements
BVSTools is Now Running V7R4M0 BVSTools is Now Running V7R4M0
Posted by September 28, 2019
BVSTools >> BVSTools Announcements

Reply




Copyright 1983-2020 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).