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:

Create QRCODE in DDS Create QRCODE in DDS
Posted by September 21, 2018
Programming >> RPG Programming
Base64 Encoding a File with RPG Base64 Encoding a File with RPG
Posted by September 6, 2018
Programming >> RPG Programming
Building JSON with RPG and YAJL and Writing to Standard Output Building JSON with RPG and YAJL and Writing to Standard Output
Posted by August 31, 2018
Programming >> Proof of Concept (POC)
How to Delete Files or Empty Trash From Your Google Drive with your IBM i and RPG/ILE How to Delete Files or Empty Trash From Your Google Drive with your IBM i and RPG/ILE
Posted by July 24, 2018
BVSTools >> BVSTools Software Discussion >> GreenTools for G Suite (Google Apps) (G4G) Specific Discussion
GreenTools for G Suite (G4G) Updated to Include Delete and Empty Trash Function GreenTools for G Suite (G4G) Updated to Include Delete and Empty Trash Function
Posted by July 24, 2018
BVSTools >> BVSTools Announcements >> GreenTools for G Suite (Google Apps) (G4G) Specific Announcements
What to Do If Your License Keys Don't Work What to Do If Your License Keys Don't Work
Posted by July 18, 2018
BVSTools >> BVSTools Software Discussion
MAILTOOL Updated to Allow Failed Message on Invalid Recipient MAILTOOL Updated to Allow Failed Message on Invalid Recipient
Posted by May 20, 2018
BVSTools >> BVSTools Announcements >> eMail Tool (MAILTOOL) Specific Announcements
Non HTTPS Callbacks Removed from GreenTools for G Suite (G4G) Non HTTPS Callbacks Removed from GreenTools for G Suite (G4G)
Posted by April 15, 2018
BVSTools >> BVSTools Announcements >> GreenTools for G Suite (Google Apps) (G4G) Specific Announcements
IBM i Related Survey Available IBM i Related Survey Available
Posted by April 7, 2018
IBM Power Systems >> (QGPL) IBM i
BVSTools Releases Braintree Webhook Open Source Application - Node.js BVSTools Releases Braintree Webhook Open Source Application - Node.js
Posted by April 5, 2018
Programming >> Open Source
BVSTools Now Offering Web Services (BETA) BVSTools Now Offering Web Services (BETA)
Posted by April 3, 2018
BVSTools >> BVSTools Announcements
Creating a Reverse SSL Proxy Using RPG on the IBM i - Part 2 Creating a Reverse SSL Proxy Using RPG on the IBM i - Part 2
Posted by March 29, 2018
Programming >> Web Programming
Still on V7R1 or Earlier?  Here's Why You Should Upgrade NOW! Still on V7R1 or Earlier? Here's Why You Should Upgrade NOW!
Posted by February 21, 2018
IBM Power Systems >> (QGPL) IBM i
Converting a MMDDYY date format to YYMMDD for Sorting Using SQL Converting a MMDDYY date format to YYMMDD for Sorting Using SQL
Posted by February 16, 2018
Programming >> RPG Programming
Moving All Files from a Google Drive Folder to the Trash Using GreenTools for Google Apps (G4G) Moving All Files from a Google Drive Folder to the Trash Using GreenTools for Google Apps (G4G)
Posted by February 3, 2018
BVSTools >> BVSTools Software Discussion >> GreenTools for G Suite (Google Apps) (G4G) Specific Discussion

Reply




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