Closing a dialog box if ajax sucess

Question

I'm using dialog box for add new users to db , I want to close dialog box if validation pass and user successfully saved. please advice

   $('.add_user_link a').each(function () {

            var $link = $(this);
            var $dialog = $('<div id="dialog"></div>')
                .load($link.attr('href') + ' #content')
                .dialog({
                    autoOpen: false,
                    title: $link.attr('title'),
                });

            $link.click(function () {

              $dialog.dialog('open');

                $('#add_user').submit(function () {

                    url = '/user/useradd/';
                    $.ajax({
                        type: "POST",
                        cache: false,
                        url: $('#add_user').attr('action'),
                        data: $('#add_user').serializeArray(),

                        success: function (data) {

                            var json_obj = $.parseJSON(data);
                            var result = json_obj['result'];
                            var lname = json_obj['lname'];
                            var email = json_obj['email'];
                            var fname = json_obj['fname'];

                            if (!result) {

                                $("#dialog").dialog('close');
                            }
                            else {
//                              
                                document.getElementById('email-error').innerHTML = email;

                                var fname_count = $("label[id*='errorfname']").length;

                                    $('input[name=fname]').after('<label id="errorfname"></label>');
                                    document.getElementById('errorfname').innerHTML = fname;



                                var lname_count = $("label[id*='errorlname']").length;
                                if (lname_count == 0) {
                                    $('input[name=lname]').after('<label id="errorlname"></label>');
                                    document.getElementById('errorlname').innerHTML = lname;
                                }




                            }



                        }


                    });
                    return false;
                });
                return false;
            });
        });

I'm getting this error

jquery-1.11.1.min.js:2 Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Answer 1

Replace:

$("#dialog").dialog('close');

With

$dialog.dialog('close')

You've already set a variable for your dialog in the click function which should be in scope so you don't need to reselect it.

UPDATE: Element IDs should be unique so you should make the dialog ID unique when adding it for a link if there are multiple links. Otherwise, you will select multiple dialog elements when you do this $('#dialog') when there are mulitiple links.

When you do this:

$dialog = $('<div id="dialog"></div>')

the ID value "dialog" should be something unique, like "dialog1", "dialog2", etc.