asked on

Make 'OK ' button in modal window key board accessible(508).

Hello,

I have a modal window form that I enter information. I am using javascript form validation on this modal window form. When I enter the info correctly, I want to able to tab with keyboard on the 'OK' button and refresh the data table with the updated info(and close the modal window). However, if I enter the info incorrectly I want to be able to tab with the keyboard to the 'OK' button and have the modal window open with the highlighted errors.
Every thing works except I cannot use the keyboard on the 'OK' button. I need for the button to be keyboard accessible. Here is my code. Thanks for the help.

	$(document).on('submit', 'form.ajaxCloseCB', function(){
		var formAction = $(this).attr('action');
		var dataString = $(this).serialize();
		var thisFormID = $(this).attr('id');
	
		var validText = '<p>The following fields are required and currently do not have a value:</p>';
		
		var errorCount = 0;
		$('#'+ thisFormID +' .error').each(function(){
			validText += '<br /><strong>'+ $(this).attr('alt') +'</strong>';
			errorCount++;
		});
		
		if (errorCount > 0){
			$('#dialogText').html(validText);
			$('#jqueryDialog').dialog({
				buttons: {
				 "Ok": function(){
						$(this).dialog('close');
					} 
				}
			});
			$('#jqueryDialog').dialog('open');
			return false;
		}
	
		if (errorCount == 0){
			$.ajax({url: formAction,type: 'post', data: dataString, success: function(theResult){
				//$('#dialogText').html(theResult); - Modified by Ryan Jones 12/11/13
				$('#dialogText').html('<br /><strong>Changes have been saved</strong>');
				$('#jqueryDialog').dialog({closeOnEscape: true,
					buttons: {
					 "OK": function(){
						$(this).dialog('close');
						top.location.reload(true);
						}
					}
				});
			}, error: function(error){
				$('#dialogText').html('The following error occurred, please try again:\n\n'+ error.responseText);
				$('#jqueryDialog').dialog({closeOnEscape: true,
					buttons: {
					 "OK": function(){
						$(this).dialog('close');
						top.location.reload(true);
						}
					}
				});
			}
			});
			$('.ui-dialog-titlebar-close').hide();
			$('#jqueryDialog').dialog('open');
			return false;
		}
	});

Open in new window

capturetheflag

ASKER

Hello,

To keep it simple. There is no focus on the 'OK; button.
However, I do have focus on the 'Accept' or 'cancel' button.

Here is the code for the accept and cancel buttons.

$(document).on('click', '#cancelFormButtonCloseModal', function(){
		$('#dialogText').empty();
			$('#dialogText').html('Are you sure you want to cancel this activity? Any unsaved data will be lost.');
			$('#jqueryDialog').dialog({
				buttons: {
					"Accept": function(){
						//location.reload();
						parent.$.colorbox.close();
					},
					"Cancel": function(){
						$('#jqueryDialog').dialog('close');
					} 	 
				}
			});
			$('#jqueryDialog').dialog('open');
	});

Open in new window

And here is the html for the buttons

<input type="submit" class="button iconRight insert" id="insert" value="SUBMIT" style="background-image: url(images/icons/add.png);" alt="SUBMIT" title="SUBMIT"/>

<input type="button" value="Cancel" id="cancelFormButtonCloseModal" class="button iconRight cancel" style="background-image: url(images/icons/cancel.png);" title="Cancel Changes" alt="Cancel Changes" />

Open in new window

Michel Plungjan

Can you focus the OK button, for example with

$('.ui-dialog-buttonpane button:contains(Ok)').focus()

capturetheflag

ASKER

Update to the problem;

This data table code is causing the modal window to lose focus. When I comment out the code, focus returns to the modal window. I need the data table. Any ideas?

Thanks,

<!--<script type="text/javascript">
$("document").ready(function () {
	
	$("#contractors_list").dataTable({
		bJQueryUI: true
		
	});
});
</script>-->

Open in new window

Eddie Shipman

Make the OK button the default and you don't have to worry about anything else. The first button is always the default.

ASKER CERTIFIED SOLUTION

capturetheflag

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

capturetheflag

ASKER

Do not reward the points, no solution was correct or used.