• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 952
  • Last Modified:

set focus on second element in jquery UI


I can't seem to set the focus on the second button (the _no) button. Everything else works fine but the focus remains constantly on the yes button.


$("#dialog-DeleteFave").dialog({ 
			
			buttons: [{ 
				text : _yes, 
				click :function() {
						var FaveToDelete = $("select[name=selectFavorite]").val();	
						$.ajax({
						   type: "POST",
						   url: "/aaMain/ajaxDeleteFavorite.php?FaveToDelete="+FaveToDelete,
						   //data: $("form[name=filters]").serialize(),
						   success: function(msg){	document.filters.runButton.value=1;
	 									document.filters.submit();
							  }
						});
					
						// then close

						$(this).dialog("close");}
					},
					{ 
				text : _no,
				click: function() {
						$(this).dialog("close");} 
					}]
			,
			width:500,
			autoOpen: false,
			modal: true,
			open: function() {
  
        $(this).parent('.ui-dialog-buttonpane button:eq(1)').focus(); 
				}
		});

Open in new window

0
gbeaulac
Asked:
gbeaulac
  • 3
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
You may use :
			open: function() {
				var container = $("#dialog-DeleteFave").parent();
				$(".ui-button-text:contains('" + _yes + "')", container).parent("button.ui-button").focus();
			}

Open in new window

0
 
leakim971PluritechnicianCommented:
Test page :

(you can change _no by _yes)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script> 
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script> 
<script language="javascript">
	$(document).ready(function() {
		var _yes = "YES";
		var _no = "NO";
		$("#dialog-DeleteFave").dialog({ 
			buttons: [
				{ 
					text : _yes, 
					click :function() {
						var FaveToDelete = $("select[name=selectFavorite]").val();	
						$.ajax({
							type: "POST",
							url:"/aaMain/ajaxDeleteFavorite.php?FaveToDelete="+FaveToDelete,
							success: function(msg){	document.filters.runButton.value=1;
								document.filters.submit();
							}
						});
						$(this).dialog("close");
					}
				},
				{ 
					text : _no,
					click: function() {
					$(this).dialog("close");} 
				}
			],
			width:500,
			autoOpen: false,
			modal: true,
			open: function() {
				var container = $("#dialog-DeleteFave").parent();
				$(".ui-button-text:contains('" + _no + "')", container).parent("button.ui-button").focus();
			}
		});
		$("input").click(function() {
			$("#dialog-DeleteFave").dialog("open");
		});
	});
</script>
</head>
<body>
<input type="button" value="OPEN" />
<div id="dialog-DeleteFave" title="Save settings" >
	<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>

Open in new window

0
 
gbeaulacAuthor Commented:

Its giving focus to the yes and the no button.

It was already automatically giving focus to the _yes button, but I need it to give focus to the _no instead.  
0
 
gbeaulacAuthor Commented:
Just had to add

$(".ui-button-text:contains('" + _yes + "')", container).parent("button.ui-button").blur();

and got it to only focus the _no

Thank you again!
0
 
leakim971PluritechnicianCommented:
You're welcome! Thanks for the points!
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.

Join & Write a Comment

Featured Post

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.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now