CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-dialog
user1032531
user1032531

Reputation: 26281

Preventing focus on input when using jQuery Dialog

I created a little jQuery plugin. The purpose is to..

  1. General a jQueryUI autocomplete
  2. If "Create New Account" is then clicked, a dialog is generated.
  3. User enters something in the field and clicks "save" and a couple of inputs are populated.

It works mostly, but upon clicking "save", the original input is focused. I've tried about everything to blur the input, but have had no success, and would appreciate any advice. How can I blur the input upon saving the dialog?

Thank you

http://jsbin.com/daxaju/1/

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(function(){
                $("#account_name").addAccount({source:[{"id":1,"value":"aaa1"},{"id":2,"value":"aaa2"},{"id":3,"value":"aaa3"},{"id":4,"value":"aaa4"}]});
            });

            (function($){
                //Add an account (used by com_contacts edit and bid lists)

                var defaults = {
                    dialogID    :'dialog-addAccount',  //Dialog to display
                    populateID  :'accounts_id',   //id to populate select account
                    handler     :function(callback,form) {callback(form);},
                    post        :'post.php',  //
                    source      :'source.php',  //
                    rules       :{},  //
                    messages    :{}  //
                };

                function mkList(list)
                //Creates list from array.  If not an array, just uses the one value
                {
                    if (list instanceof Array) {
                        var string='';
                        for(var i in list){string+='<li>'+list[i]+'</li>';}
                    } else {
                        var string=list;
                    }
                    return string;
                }

                var methods = {
                    init : function (options) {

                        var settings = $.extend({}, defaults, options);
                        var selectedInput=this;
                        var $dialog=$('#'+settings.dialogID);

                        console.log('test','#'+settings.dialogID,$dialog,$dialog.find('form'));

                        var validator=$dialog.find('form').validate({
                            rules: settings.rules,
                            messages: settings.messages,
                            submitHandler: settings.handler.bind(null, function(form) {
                                var data=$(form).find(':input').serializeArray();
                                //$.post(settings.post,data, function (json) {
                                //Returns account id (id) and errors[]
                                var json={id:123,errors:[]};    //testing only
                                if(json.errors.length==0) {
                                    $('#'+settings.populateID).val(json.id);
                                    console.log('post',selectedInput,form.name.value)
                                    settings.oldname=form.name.value;
                                    selectedInput.val(form.name.value);//.blur();
                                }
                                else{$("#dialog-error").data('error','Error adding account<ul>'+mkList(json.errors)+'</ul>').dialog("open");}
                                $("#dialog-addAccount").dialog("close");
                                //},'json');
                            })
                        });
                        console.log($dialog.find('form'),validator)

                        $dialog.dialog({
                            autoOpen    : false,
                            resizable   : false,
                            height      : 300,
                            width       : 664, 
                            modal       : true,
                            open        : function() {
                                validator.resetForm();
                                $(this).find('input:not([type=hidden],:checkbox),select').val('');
                            },
                            buttons     : [
                                {
                                    text    : 'SAVE',
                                    'class'  : 'green wide',
                                    click    : function() {
                                        $dialog.find('form').submit();
                                    }
                                },
                                {
                                    text    : 'CANCEL',
                                    'class'  : 'gray',
                                    click    : function() {$(this).dialog('close');}
                                }
                            ]    
                        });
                        $(this).focus(function(e) {
                            settings.oldname=this.value;
                            this.value='';
                            console.log(e,'focus')
                        }).blur(function(e) {
                            this.value=settings.oldname;
                            console.log(e,'blur')
                        }).autocomplete({
                            source: settings.source,
                            minLength: 2,
                            select: function(event, ui){
                                $('#accounts_id').val(ui.item.id);
                                settings.oldname=ui.item.value ;
                            },
                            response: function( event, ui ) {
                                ui.content.push({value:"Create new account", id:0, label:"Create new account"});
                            },
                            /*
                            change: function( event, ui ) {
                            console.log('change',event,ui,this)
                            $(this).blur();
                            },
                            */
                            open: function( event, ui ) {
                                $('ul.searchAccountList li:last').css('color','blue').click(function(){
                                    $dialog.dialog("open");
                                    return false;
                                });
                            }
                        }).autocomplete( "widget" ).addClass("searchAccountList");

                        //return this.each(function () {});
                    },
                    destroy : function () {
                        //Anything else I should do here?
                        delete settings;
                        return this.each(function () {});
                    }
                };

                $.fn.addAccount = function(method) {
                    if (methods[method]) {
                        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                    } else if (typeof method === 'object' || ! method) {
                        return methods.init.apply(this, arguments);
                    } else {
                        $.error('Method ' +  method + ' does not exist on jQuery.addAccount');
                    }    
                };

                }(jQuery)
            );
        </script>
    </head>

    <body>
        <input type="text" id="account_name" />
        <input type="text" id="accounts_id" />

        <div id="dialog-addAccount">
            <form>
                <input type="text" value="" name="name" />
            </form>
        </div>

    </body> 
</html>

Upvotes: 1

Views: 585

Answers (1)

Yalamber
Yalamber

Reputation: 7580

You can use dialog's close event to achieve this. http://api.jqueryui.com/dialog/#event-close

See the edits here. http://jsbin.com/heyuvamoyo/1/

I have made $('input').blur(); but you can pass specific id of the input as well.

Upvotes: 2

Related Questions