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

LVL 1
capturetheflagAsked:
Who is Participating?
 
capturetheflagAuthor Commented:
Thanks for the help but the project went in a completely different direction. So it was not needed.
0
 
capturetheflagAuthor Commented:
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

0
 
Michel PlungjanIT ExpertCommented:
Can you focus the OK button, for example with

$('.ui-dialog-buttonpane button:contains(Ok)').focus()
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
capturetheflagAuthor Commented:
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

0
 
Eddie ShipmanAll-around developerCommented:
Make the OK button the default and you don't have to worry about anything else. The first button is always the default.
0
 
capturetheflagAuthor Commented:
Do not reward the points, no solution was correct or used.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.