Response title
This is preview!
Move this topic
jQuery UI 1.8 Dialog - set focus to the first tabbable element
Working on it
- Need more info
- Working on it
- Answered
in Developing jQuery UI
•
13 years ago
I was interested to upgrade to 1.8 from 1.7.2, but I found some broken feature with Dialog - set focus to the first tabbable element when dialog is opened.
When dialog is opened, I expect a first button being focused, and such button will process "click" when I press "Enter". It works fine with 1.7.2, but with 1.8 no button is selected when dialog is opened, and therefore "Enter" does not work till you set focus using "Tab" key.
In additional size of buttons are increased despite using the same theme.
This issue actually block me to upgrade to 1.8 and I am waiting for a fix.
When dialog is opened, I expect a first button being focused, and such button will process "click" when I press "Enter". It works fine with 1.7.2, but with 1.8 no button is selected when dialog is opened, and therefore "Enter" does not work till you set focus using "Tab" key.
In additional size of buttons are increased despite using the same theme.
This issue actually block me to upgrade to 1.8 and I am waiting for a fix.
4
Replies(7)
I just ran into this issue also. In looking at it though, it might actually be more a bug (or change?) in the way the jQuery .add() function works. When running through the following code it looks as though the add function is not actually appending to the end of the list (like it did in jQuery 1.3.x) but rather inserting into the beginning of the list. This means that when the last ".filter(':first')" is run it is actually picking the uiDialog panel object (the last thing added) rather then any focusable items in it.
$([])
.add(uiDialog.find('.ui-dialog-content :tabbable:first'))
.add(uiDialog.find('.ui-dialog-buttonpane :tabbable:first'))
.add(uiDialog)
.filter(':first')
.focus();
andy
$([])
.add(uiDialog.find('.ui-dialog-content :tabbable:first'))
.add(uiDialog.find('.ui-dialog-buttonpane :tabbable:first'))
.add(uiDialog)
.filter(':first')
.focus();
andy
Thanks Andy, you're correct that .add() changed in 1.4.2. I just checked the source and what's happening is .add() now sorts the jQuery object into DOM order.
Thanks for tracking this down.
Leave a comment on aerichmond's reply
Moved to 'Developing jQuery UI' for further review
Leave a comment on rdworth's reply
Let's get a ticket filed on this if there isn't one already:
http://dev.jqueryui.com/newticket (note: requires registration)
http://dev.jqueryui.com/newticket (note: requires registration)
Ticket created: http://dev.jqueryui.com/ticket/5629
Leave a comment on rdworth's reply
Hi ,
I am facing similar situation. I have 2 tabs inside a jquery dialog
and i always want to fous the 1st tab when i open. But when i visit
2nd tab and save and open next time it opens with 2nd tab.
this is the code. What changes shall I do here. The first tab div
id is "view1"
- $(function() {
- $("#divPopUp").dialog({
- resizable: true,
- autoOpen: false,
- height:500,
- width: 550,
- modal: true,
- show:{effect: "blind"},
- buttons: {
- "Save": function() {
- var text = $(this).find( ":checkbox:checked" ).map(function() {
- return this.value+' ';
- }).get().join(",\n");
- var obj = $(this).data("opener");
- $(obj).parents('td:first').siblings(':eq(3)').find(':input').val(text);
- $("#searchText").val("");
- $( this ).dialog( "close" );
- },
- Cancel: function() {
- $( this ).dialog( "close" );
- },
- "Reset": function() {
- var numberOfChBox = document.getElementsByClassName('chk');
- for(i = 0; i < numberOfChBox.length; i++)
- {
- if(numberOfChBox[i].checked) {
- numberOfChBox[i].checked = false;
- }
- }
- }
- },
- close:function(){
- $(this).find( ":checkbox" ).removeAttr('checked');
- $(this).find('.mychk').show();
- $("#searchText").val("");
- $( this ).dialog( "close" );
- }
- });
- $('button.mapbtn').on('click', function(){
- var title = $(this).parents('td:first').siblings(':eq(1)').text();
- var sourceHeadertext = title.split("\n");
- title = sourceHeadertext[0];
- $( "#divPopUp" ).data('opener', this).dialog( "option", "title", "Select Target Fields For : "+title ).dialog( "open" );
- // $("#divPopUp").tabs("select", 0);
- appendTo: "#view1";
- var text = $(this).parents('td:first').siblings(':eq(3)').find(':input').val();
- if($.trim(text) != ''){
- $('#searchedText').html('Searched Text: '+text);
- var texts = text.split(",\n");
- $.each(texts, function(i, value){ $("#divPopUp").find(':checkbox[value="'+$.trim(value)+'"]').prop('checked', true);
- });
- $('#divPopUp #view1 div').sort(function(a,b){
- var a = $(a);
- var b = $(b);
- if( a.find("input").is(':checked') && !b.find("input").is(':checked') )
- return -1;
- if( !a.find("input").is(':checked') && b.find("input").is(':checked') )
- return 1;
- }).appendTo('#divPopUp #view1');
- }
- });
You're extremely unlikely to get help on a four year old conversation about a version that hasn't been supported for two years.
Leave a comment on mparida1000's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to manishma's question
Statistics
- 7 Replies
- 21091 Views
- 3 Followers