在AJAX POPUP加载中将重点放在文本框上

Question

In my site, Login window open as POPUP using AJAX call. Please refer below screen grab:

$('#hrefLogin').click(function () {
    var url = $('#divLogin').data('request-path');

    $.ajax({
        url: url,
        type: 'GET',
        success: function (data) {
            ////Render the partial view HTML returned by the action method
            $("#divLogin").html(data);

            $.fancybox({
                href: "#divLogin",
                'maxWidth': 420, // set the width
                'minHeight': 400,
                'maxHeight': 400,
                'height':'auto',
                'autoSize': false                
            });

            $.fancybox.update();

            ////Reparse html data to enable MVC data annotation work.
            $('form').removeData('validator');
            $('form').removeData('unobtrusiveValidation');
            $.validator.unobtrusive.parse('form');
        }
    });
});

Login window have two input fields UserName and Password. I need to set focus on UserName field when popup open.

Many Thanks,

Regards, Lalitha

Answer 1

I'm gonna complete my comment here , in my complete answer .

I see that you use fancybox , so I looked at it and saw that there is an option for doing something after the popup complete .

so you'r gonna have something like this in you'r code:

$("#divLogin").html(data);

$.fancybox({
    href: "#divLogin",
    'maxWidth': 420, // set the width
    'minHeight': 400,
    'maxHeight': 400,
    'height':'auto',
    'autoSize': false,
    onComplete : function(){
        $(".username").focus();
    };                
 });

 $.fancybox.update();

so , the focus is been updated after the popup content display successfully.

good luck and have fun .