Focus On Textfield In JQuery Dialog Content Not Working

Question

I am having problem forcing focus on a textfield in the content of a JQuery dialog content, which is dynamically generated. I have googled about this and it seems that if the Jquery dialog is set as modal, JQuery "steals" the focus at the document level. To be honest, I don't really understand what that means :P but if anyone have any workaround to my problem, it will be appreciated. Below are the code snippets of my Jquery dialog.

    $.post(URI, Params, function(data){
    $("<div id='MyModal'></div>").html(data).dialog({
        show: "blind",
        width:1000,
        height:600,
        title:"My Modal",
        resizable: false,
        modal: true,
        draggable:false,
        position:['center','center'],
        buttons: {
            "Close": function() { 
                //window.console.log('Close button clicked');
                $(this).dialog("close");
            }, 
        },

        // Onclose callback
        close:function(){
            // Close modal
                            CloseDiaryModal();
        }
        // End onclose callback
    })
    // Add styling to button widgets
    .dialog("widget")
    .find(".ui-dialog-buttonset").css({'float': 'left', 'width': '100%'}).end()
    .find(".ui-dialog-buttonset button")
    .eq(0).css({'float': 'left', 'margin-left': '10px'}).end()
    .eq(0).attr('id', 'CloseBtn').end()
})
.complete(function() {      
            // Set focus
    $("#SearchField").focus();
}); 
// End modal function

I have tried adding the following options but its still not working. ATM, you can see the cursor blinking for about 1 sec and then it loses focus. Can't figure out why this is happening. Thanks and hope someone can help me with this.

focus:function(event, ui) { 
        $("#SearchLastName").focus(); 
},
open:function(event, ui) { 
    $('#SearchLastName').focus(); 
},

score 0 · Answer 1 · answered May 21 '13 at 08:53

In one case I had, it turned out that the input field in question had been disabled by other code.

If this is the case, either remove the disabled attribute like so:

jQuery('#<form-id>').dialog({
    open: function(event, ui) {
        jQuery('#<input-id>').removeAttr('disabled').focus();
    }
});

...or avoid disabling the form field in question.

score 0 · Answer 2 · answered Jan 10 '12 at 00:52

0

I think its more about when the content is added to the modal dialog. Try setting focus on the text field after you've made sure the dialog has successfully loaded:

$('some selector').dialog({
    bgiframe: true,
    open: function() { 
       $('./*your element*/'.focus();
    },
    beforeclose: function(event, ui) { /* your code */ }
});

This will make sure to only try to perform the focus after already opening the dialog.

answered Jan 10 '12 at 00:52

danbgray

582
3
8

You might have missed my last edit when you posted this. Anyway, as you can see on my edited question, I have tried with both options "open" and "focus" and I did try adding the set focuscode in the POST event "complete" but nothing works. Like I said, you can see the cursor blinking for a sec but then it loses focus. – asyadiqin Jan 10 '12 at 01:08
I have never used jsfiddle.net before and have no idea how to use it. Plus the original codes are quite complex for me to know what part to extract to use in jsfiddle.net. Any other way you can help me? – asyadiqin Jan 11 '12 at 18:00
well the open:function() {} method works fine in my isolated test case on js fiddle: http://jsfiddle.net/heu7h/ – danbgray Jan 12 '12 at 20:21
Yesterday, I upgraded my JQuery from 1.5.1 to 1.7.1 and didn't think much abt the focus issue as I have tried almost everything. Abt an hour ago, I was testing something and I noticed that focus is working, ie. focus set on the textfield. Can't confirm it but upgrading to 1.7.1 seems to solve. I know that some might suggest that it was probably cache issue and that I was using a cached page or something but I always reload the page after every code change, ie. CTRL+F5 and something clearing the browser cache/temp files. Anyway, thanks for all the help. – asyadiqin Jan 13 '12 at 10:55

Focus On Textfield In JQuery Dialog Content Not Working

2 Answers2