Jquery UI Dialog with AJAX content, can't set focus

Question

I load content to jquery UI Dialog threw ajax and can't set focus on H1 tag. And no metter what, i can't set focus to any element of the dialog, it just stack on last element of the dialog.

Here is my code:

$(document).on('click', '.home_story_small_top', function( event ){

        event.preventDefault();

        var storyId = $(this).attr('storyId');

        function success( html )
        {       
            $("#storyContent").html(html);

            $('#storyContent').dialog({
                modal: true,
                resizable: false,
                height: $(window).height() - 100,
                width: $(window).width() - 400,
                dialogClass: 'noTitleDialog',
                buttons: {
                    Close: function(){
                        $(this).dialog('destroy');
                    }
                },
                open: function() { 
                    $('h1').focus(); 
                }
            });

            $('#newStoryTag' + storyId).hide();
        } 

        $.ajax({  
            url: "/showstory/" + storyId + "/ajax",
            cache: false,  
            success: success 
        });
    });

Answer 1

I don't know what your HTML looks like but try waiting for a few milliseconds before focusing.

open: function() {          
  setTimeout(function(){$('#storyContent input').focus();},100);        
}

Note: I have never tried it but I don't think h1 elements can't be focused.. Only input elements.

Try a setTimeout to pause for 100 miliseconds and then set the focus. You may not need to wait 100 milliseconds 1 might do it. You can test it out.