https://www.disasterassistance.gov/DAC/javascript/modalSupportRWD.js

1/*
2 This javascript provides support for various types of bootstrap modal dialogs where the content is loaded via AJAX calls
3   
4  Note that all <a> and button tags that call the methods to open dialogs must include the data-target and data-toggle 
5  elements:    data-target="#infoModal" data-toggle="modal"
6  
7  1) Information/Read Only modals can be opened with loadInfoModal()
8  
9 <a id="modalCalendar" href="" data-toggle="modal" data-target="#infoModal" 
10	onclick="loadInfoModal('<%=request.getContextPath()%>','Calender','/displayPage.do?forward=calPage&');">
11	Open Calender
12</a>
13
14  2) Dialogs that have a form to submit can be opened with loadInfoModal() and then the content that is returned with 
15  AJAX should contain a form with an ID and a call to attachDialogForm("#formID").   The submit button will be displayed
16  and when selected it will submit the form. If this is a typical update form, that submits to an action it can forward 
17  to 'closeAndRefreshRWD' to close the dialog and reload the main page or to 'closeModal' to just close the modal dialog. 
18  
19<form method="post" id="dstrselect" name="dstrselect" action="<%=request.getContextPath()%>/cc/disasterInfo-action.do">
20 .....
21 </form>
22
23<script>
24	attachDialogForm("#dstrselect");
25</script>
26
27 3) If a submit button is needed, but the basic form submission implementation is not sufficient, you can provide your 
28 own method to execute on the submit button.  Generally you will need to prevent the default execution.  Your method 
29 should return true to close the dialog or false to keep the dialog open. 
30
31<script>
32	
33	var closeFunc = function setIncome(event) {
34		event = event || window.event;
35		event.preventDefault();
36	return submitData();
37	}
38
39	attachDialogCloseFunction(closeFunc,'Save');
40</script>
41   
42 */
43
44
45
46
47var modalFormSelector = null; 
48var modalSubmitFunction = null;
49var contextPath = null;
50
51
52/**
53 * Open the information modal dialog with content from the server via AJAX
54 * @param context - The servlet context
55 * @param title - The title of the dialog
56 * @param location - The url of the content
57 * @param width - Width of the dialog in pixels
58 * @param height - Height of the dialog in pixels
59 */
60function loadInfoModalWithSize(context, title, url,width,height)
61{
62	loadInfoModal(context, title, url);
63	$(".modal-dialog").width(width);
64	$(".modal-dialog").height(height);
65}
66/**
67 * Open the information modal dialog with content from the server via AJAX
68 * @param context - The servlet context
69 * @param title - The title of the dialog
70 * @param location - The url of the content
71 */
72function loadInfoModal(context, title, url)
73{
74	if (typeof closeOpenPopover == 'function') { 
75	  closeOpenPopover(); 
76	}
77	
78	contextPath = context;
79	$('#closeButtonOnly').show();
80	$('#closeSubmitButton').hide();
81
82	$("#infoModalLabel").html(title);
83	startBusyAnimation();
84	$("#modal-body").load(context + url);
85}
86
87/**
88 * Open the busy dialog with specific parameters in url form.  All parameters are optional so only pass those that are needed. 
89 * @see loadingBusyScreen.jsp for specific parameters.
90 */
91function showBusyDialog(context, params)
92{
93	var url = "/loadingBusyScreen.jsp";
94	if (params != null)
95	{
96		url = url + "?" + params;
97	}
98	
99	loadInfoModal(context, "Executing...", url);
100	$("#modal-body").height(130);
101	$('#closeButtonOnly').hide();
102	$("#infoModal").modal({"backdrop": "static"});
103	$("#infoModal").show()
104}
105
106/**
107 * Open the busy dialog for search screens.
108 */
109function showSearchBusyDialog(context)
110{
111	showBusyDialog(context, 'msgKey=busy.message.search&height=100&width=350');
112}
113
114/**
115 *  Reload the open modal dialog with content from the server.   Use this method onClick for a submit button or 
116 *  other HTML element that should have it's default behavior supressed. 
117 * @param event - event from onClick()
118 * @param context  - The servlet context
119 * @param url The path to the content
120 */
121 function reloadInfoModal(event, context, url)
122{
123	event = event || window.event;
124	event.preventDefault();
125	
126	doModalGet(context, url);
127}
128
129/**
130 *  Reload content in the open modal dialog with content from the server.   Use this method if there is no HTML element
131 *  event that needs to be suppressed
132 * @param context  - The servlet context
133 * @param url The path to the content
134 */
135
136function doModalGet(context, url)
137{
138	var getAction =$.ajax({url: context + url, cache: false});
139 
140	startBusyAnimation();
141	document.body.style.cursor = "wait";
142	
143	getAction.done(function(data) {

144	   $("#modal-body").empty().append(data);
145	   document.body.style.cursor = "default";
146	});
147}
148
149/**
150 *  Hide the submit button and show only the close button.
151 *  Call this in the return content of an open modal that is loaded 
152 *  via the modal submit button and the current page does not need submit. 
153 */
154function showOnlyCloseButton() {
155	$('#closeButtonOnly').show();
156	$('#closeSubmitButton').hide();
157}
158
159/**
160 *  Set the modal dialog title
161 * @param title 
162 */
163function setModalTitle(title)
164{
165	$("#infoModalLabel").html(title);
166}
167
168/*
169 * Start the busy animation.  This can be called when loading data.  
170 */
171function startBusyAnimation(){
172	$("#modal-body").html('<div class="text-center"><img id="infoModalBusy"  src="' + contextPath + '/images/busy-circle.gif" border=0 alt="busy animation" longdesc=" "/></div>');
173}
174
175/**
176 * Open the modal DIV with help content from the server with AJAX
177 * @param context -  The context root
178 * @param title - The Default title
179 * @param application - Struts message application
180 * @param bundle - Struts message bundle
181 * @param helpMsgKey - Struts help text message key
182 */
183function openHelpModal(context, title, application, bundle, helpMsgKey)
184{
185	var location = '/help.do?application=' + application;
186	location += '&bundle=' + bundle; 
187	location += '&property=' + helpMsgKey;
188	location += '&rwd=true&';
189	loadInfoModal(context,title,location);
190}
191
192/**
193 * Show the submit button on the dialog and attach the button to the function that is passed in.  The function should
194 * return true if the dialog should close or false to keep the dialog open.   This should be called in the HTML content
195 * loaded into the page. 
196 * @param closeFunction  The function to execute when the submit button is pressed. 
197 * @param newButtonText  Optional parameter to change the button text from submit to something else, like "Save". 
198 */
199function attachDialogCloseFunction(submitFunction, newButtonText) {
200	$('#closeButtonOnly').hide();
201	$('#closeSubmitButton').show();
202	
203	if (submitFunction != null && typeof submitFunction == 'function')
204	{
205		modalFormSelector = null;
206		modalSubmitFunction = submitFunction;
207	}
208	
209	if ((newButtonText != null)&&(typeof newButtonText !== "undefined") )
210		document.getElementById("modalSubmitButton").innerHTML=newButtonText;
211}
212/**
213 * Attach the form of the modal dialog to the generic submit button.  Call this in the body content of a modal that has
214 * a form that should be submitted to return content also inside the modal dialog. If this is a typical update form, 
215 * that submits to an action it can forward to 'closeAndRefreshRWD' to close the dialog and reload the main page or to 
216 * 'closeModal' to just close the modal dialog.   If you need something more sophisticated use attachDialogCloseFunction()
217 * above to provide your own custom function. 
218 * @param formSelector - String that contains a JQuery selector for the form.  Typically an ID selector: '#myModalForm'
219 */
220  function attachDialogForm(formSelector) {
221	  //console.log('attachDialogForm ' + formSelector);
222	  modalFormSelector = formSelector;
223	  modalSubmitFunction = null;
224	  
225	  $('#closeButtonOnly').hide();
226	  $('#closeSubmitButton').show();
227	  
228      // Attach a submit handler to the form
229      $(formSelector).submit(function (event) {
230          // Stop form from submitting normally
231          event.preventDefault();
232		
233          // Get some values from elements on the page:
234          var $form = $(this), url = $form.attr("action");
235
236          // Send the data using post
237          var posting = $.post(url, $form.serialize());
238
239          startBusyAnimation();
240
241          // Put the results in a div
242          posting.done(function (data) {
243              //console.log("Done: " + data);
244              $("#modal-body").empty().append(data);
245          });
246      });
247  }
248
249/**
250 * This function is called when the submit button is clicked. The page loaded via ajax must call one of the 
251 * following two functions to make it work. 
252 * 
253 * attachDialogForm() - Use this function if you have a form on the page that just needs to be submitted
254 * attachDialogCloseFunction() - Use this button to invoke your own custom method to deal with the content
255 */

256function executeModalSubmitButton() {
257	if (modalFormSelector != null)
258	{
259		$(modalFormSelector).submit();
260		return;
261	}
262	if (modalSubmitFunction != null){
263		var close = modalSubmitFunction();
264		if (close){
265			 $('#infoModal').modal("toggle");
266		}
267	}
268}
269/**
270 *  Set the focus back to the top of the modal dialog.   This is called after focus moves off of the last button. 
271 * @param event 
272 */
273function resetModalFocus(event) {
274	event = event || window.event;
275	event.preventDefault();
276	$('#modalCloseX').trigger('focus')
277}			
278
279function setContextPath(context)
280{
281	if (context)
282	{
283		contextPath = context;
284	}
285}
286
287$(function() {
288    $('.modal').on('shown.bs.modal', function () {
289        $(this).removeAttr('aria-hidden');
290    });
291    $('.modal').on('hidden.bs.modal', function () {
292        $(this).attr('aria-hidden', 'true');
293    });
294});