Showing-Modal-Dialog-From-GSP

// JavaScript/JQuery
<script>
	$(document).ready(function(){

		<!-- Cancel Process -->
		$('.showCancelProcessDialog').click(function(){
	
			selectedProcessId = $(this).attr('id');
			
			$( "#cancelProcessDialog" ).dialog({ width: 350 });
			$( "#cancelProcessDialog" ).show();
		});
	
		$('#cancel-close-cancel-process-dialog').click(function(){
	
			$( "#cancelProcessDialog" ).dialog('close');
		});
		
		$('#go-cancel-process').click(function() {
	
			<!-- Prevent duplicate requests or form submissions -->
			$("#go-cancel-process").attr("disabled", true);
			$("#go-cancel-process").val('Please wait...');
	
			var selectedReasonForCancelingProcess = $("#cancelReason").val();
			
			$.ajax({
				url:'/bfs/adminCustomer/cancelProcess',
				type: "POST",
				data: {"id": ${customerInstance?.id}, "processId": selectedProcessId, "cancelReason": selectedReasonForCancelingProcess},
				success: function(data) {
					$( "#cancelProcessDialog" ).dialog('close');
	
					window.location.reload(true);
				
					<!-- Reset Button that prevents duplicate requests or form submissions -->
					$( "#go-cancel-process" ).attr("disabled", false);
					$( "#go-cancel-process" ).val('go');
		        	},
		        	error: function(xhr, textStatus, error){
		           		//whatever you need to do here - output errors etc.
		           		console.log(xhr.statusText);
		           		console.log(textStatus);
		           		console.log(error);
		        	}
	        	});
	        });
	});
</script>


// HTML (GSP)
<input type="button" class="showCancelProcessDialog" id="${process.id}" name="showCancelProcessDialog" 
	value="${message(code: 'admin.customer.profile.cancel.process.button.label', default: 'Cancel Process')}"/>


<!-- Cancel Process -->
<div id="cancelProcessDialog" title="Specify reason" class="hidden">
	<div>
		<g:select id="cancelReason" name="cancelReason" from="${cancelProcessReasonOptions}" size="5" 
			style="min-width: 25em;" required="" class="many-to-many" />
	</div>
	<br />
	<div class="buttons" style="text-align: left;">
 		<input type="button" id="go-cancel-process" name="go" 
 			value="${message(code: 'admin.customer.profile.cancel.process.go.button.label', default: 'go')}"/>
				
		<input type="button" id="cancel-close-cancel-process-dialog" name="cancel" 
			value="${message(code: 'admin.customer.profile.cancel.process.cancel.button.label', default: 'cancel')}"/>
	</div>
</div>