Solved

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

Posted on 2014-01-30
6
426 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: 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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

735 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