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:

Update for Google WorkSpace Accounts (2024): Google Dropping Support for Update for Google WorkSpace Accounts (2024): Google Dropping Support for "Less Secure Apps" May 30th, 2022. What Does This Mean for Your IBM i Email?
Posted by January 19, 2024
BVSTools >> BVSTools Software Discussion >> Email Tools (MAILTOOL) Specific Discussion
Sales By State Report in QuickBooks Online Sales By State Report in QuickBooks Online
Posted by January 13, 2024
QuickBooks >> QuickBooks Online
How to Whitelist GreenTools for G Suite (G4G) For Your Organization How to Whitelist GreenTools for G Suite (G4G) For Your Organization
Posted by November 5, 2023
BVSTools >> BVSTools Software Discussion >> GreenTools for G Suite (Google Apps) (G4G) Specific Discussion
QuickBooks Online Releases QuickBooks Online Releases "New Invoices!"... and It's Terrible!
Posted by October 8, 2023
QuickBooks >> QuickBooks Online
Admin/4i - What is it? Admin/4i - What is it?
Posted by September 30, 2023
Vendor Corner >> MSD Information Technology
BVSTools Releases Send Job Log to BVSTools (SNDLOG2BVS) Command BVSTools Releases Send Job Log to BVSTools (SNDLOG2BVS) Command
Posted by August 28, 2023
BVSTools >> BVSTools Announcements
MAILTOOL Now Allows Email Redirection for Development and Testing MAILTOOL Now Allows Email Redirection for Development and Testing
Posted by May 27, 2023
BVSTools >> BVSTools Announcements >> eMail Tool (MAILTOOL) Specific Announcements
GreenTools for Microsoft Apps (G4MS) Now Supports Footers When Sending Email GreenTools for Microsoft Apps (G4MS) Now Supports Footers When Sending Email
Posted by March 29, 2023
BVSTools >> BVSTools Announcements >> GreenTools for Microsoft Apps (G4MS) Specific Announcements
QuickBooks Online - Subtotals and Discounts Frustration QuickBooks Online - Subtotals and Discounts Frustration
Posted by March 16, 2023
QuickBooks >> QuickBooks Online
Making the Switch From QuickBooks Desktop to QuickBooks Online - No Picnic Making the Switch From QuickBooks Desktop to QuickBooks Online - No Picnic
Posted by March 16, 2023
QuickBooks >> QuickBooks Online
BVSTools Software Verified on V7R5 and Power10 BVSTools Software Verified on V7R5 and Power10
Posted by December 9, 2022
BVSTools >> BVSTools Announcements
Microsoft Office 365 Servers and Random Errors Issue Microsoft Office 365 Servers and Random Errors Issue
Posted by November 14, 2022
BVSTools >> BVSTools Software Discussion >> Email Tools (MAILTOOL) Specific Discussion
Sending/Resending Emails Using a MIME File with MAILTOOL Sending/Resending Emails Using a MIME File with MAILTOOL
Posted by November 8, 2022
BVSTools >> BVSTools Software Discussion >> Email Tools (MAILTOOL) Specific Discussion
Sending an HTML Email on Your IBM i Using MAILTOOL Sending an HTML Email on Your IBM i Using MAILTOOL
Posted by November 1, 2022
BVSTools >> BVSTools Software Discussion >> Email Tools (MAILTOOL) Specific Discussion
Transferring License Keys from One System to Another Transferring License Keys from One System to Another
Posted by October 31, 2022
BVSTools >> BVSTools Software Discussion

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).