Solved

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

Posted on 2014-01-30
6
398 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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
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)

760 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now