Control not returning back to function in jquery

Question

I am customizing the alert box in Jquery with a function c_alert(). I am showing alert box while user logins with empty login details. The function which is called upon login is as shown below.

function login()
{
    var loginName     = $("#US_UName").val();
    var loginName     = $.trim(loginName);

    if (loginName == "") {

        c_alert("Authentication Error","Please enter your username");
        $("#US_UName").focus();   // not working
        return false;

    } 
}

The c_alert() is as:

function c_alert(Title,Msg) {
    $.confirm({
        'title'     : Title,
        'message'   : Msg,
        'buttons'   : {
            'OK'    : {
                'class' : 'blue',
                'action': function(){
                    return;
                }
            }
        }
    });
};

Now, the problem is that after alert is shown, I want to point cursor to the corresponding field for entering details, which is not working. I tried with return; statement in the c_alert(), but didnt worked.

The code for $.confirm() is as shown below:

(function($){

    $.confirm = function(params){

        if($('#confirmOverlay').length){
            // A confirm is already shown on the page:
            return false;
        }

        var buttonHTML = '';
        $.each(params.buttons,function(name,obj){

            // Generating the markup for the buttons:

            buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>';

            if(!obj.action){
                obj.action = function(){};
            }
        });

        var markup = [
            '<div id="confirmOverlay">',
            '<div id="confirmBox">',
            '<h1>',params.title,'</h1>',
            '<p>',params.message,'</p>',
            '<div id="confirmButtons">',
            buttonHTML,
            '</div></div></div>'
        ].join('');

        $(markup).hide().appendTo('body').fadeIn();

        var buttons = $('#confirmBox .button'),
            i = 0;

        $.each(params.buttons,function(name,obj){
            buttons.eq(i++).click(function(){

                // Calling the action attribute when a
                // click occurs, and hiding the confirm.

                obj.action();
                $.confirm.hide();
                return false;
            });
        });
    }

    $.confirm.hide = function(){
        $('#confirmOverlay').fadeOut(function(){
            $(this).remove();
        });
    }

})(jQuery);

Can anyone help me to find what I am doing wrong?

Thanks in advance.

Answer 1

You need to add the focus command to the ok function of your alert, like so

function c_alert(Title,Msg, el) {
    $.confirm({
        'title'     : Title,
        'message'   : Msg,
        'buttons'   : {
            'OK'    : {
                'class' : 'blue',
                'action': function(){
                    if(el) {
                        el.focus();
                    }
                    return;
                }
            }
        }
    });
};