Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2014-01-30
6
Medium Priority
?
438 Views
Last Modified: 2014-02-11
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

0
Comment
Question by:capturetheflag
  • 4
6 Comments
 
LVL 1

Author Comment

by:capturetheflag
ID: 39821195
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39823271
Can you focus the OK button, for example with

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

Author Comment

by:capturetheflag
ID: 39824003
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 26

Expert Comment

by:EddieShipman
ID: 39824241
Make the OK button the default and you don't have to worry about anything else. The first button is always the default.
0
 
LVL 1

Accepted Solution

by:
capturetheflag earned 0 total points
ID: 39840008
Thanks for the help but the project went in a completely different direction. So it was not needed.
0
 
LVL 1

Author Closing Comment

by:capturetheflag
ID: 39849664
Do not reward the points, no solution was correct or used.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

783 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question