Диалоговое окно jQuery UI и сортируемые столбцы # проблема класса диалога

Question

Мне удалось создать сортируемую систему портлетов для существующей CMS. Я также сделал всплывающее диалоговое окно, в котором я могу изменить true на форму заголовка и в будущем еще немного содержимого в диалоге для каждого портлета.

Однако моя проблема в том, что #dialog показывает форму на моей странице, прежде чем я нажимаю на значок. Когда я нажимаю на значок, форма удаляется со страницы и хорошо отображается внутри диалога. Я понимаю , почему это делает, но я не могу решить это.

Вот мой JavaScript:

          $('.column .portlet-header .ui-icon-wrench').click(function(e) {
        e.preventDefault();
          var portlet_to_edit = $(this).parents('.portlet').attr('id');


                //dialog                
                               //  alert($(this).parents('.portlet').attr('id'));
                                $("#dialog").dialog({ 
                                                      bgiframe: true,
                                                      autoOpen: false,
                                                      height: 300,
                                                      modal: true,

                                                        buttons: {
                                'Save block': function() {
                                var bValid = true;
                    allFields.removeClass('ui-state-error');

                    bValid = bValid && checkLength(name,"username",3,16);
                    bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter.");



                               if (bValid) {

                                $.ajax({
                                type: "POST",
                                url: "server_items_reorder.php",
                                data: 'tid=' + portlet_to_edit + '&title=' + name.val()
                                      });
                                        $(this).dialog('close'); 
                                        $('.portlet').sortable('refresh') //not work?
                                        }

                                 },
                                Cancel: function() {
                                $(this).dialog('close');
                                  }
                                 },
                                 close: function() {
                                 //allFields.val('').removeClass('ui-state-error');
                                }
                          })
                $('#dialog').dialog('open');
            }); 

Я знаю, что это должно быть примерно так (пример jQuery):

$("#dialog").dialog({
            bgiframe: true,
            autoOpen: false,
            height: 300,
            modal: true,
            buttons: {
                'Create an account': function() {
                    var bValid = true;
                    allFields.removeClass('ui-state-error');

                    bValid = bValid && checkLength(name,"username",3,16);
                    bValid = bValid && checkLength(email,"email",6,80);
                    bValid = bValid && checkLength(password,"password",5,16);

                    bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter.");
                    // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                    bValid = bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"eg. ui@jquery.com");
                    bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9");

                    if (bValid) {
                        $('#users tbody').append('' +
                            '' + name.val() + '' + 
                            '' + email.val() + '' + 
                            '' + password.val() + '' +
                            ''); 
                        $(this).dialog('close');
                    }
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            },
            close: function() {
                allFields.val('').removeClass('ui-state-error');
            }
        });



        $(''.column .portlet-header .ui-icon-wrench'').click(function() {
            $('#dialog').dialog('open');
        })
   

Но тогда функция не обновляет мой $.ajax.

Answer 1

Если я правильно понимаю вашу проблему, думаю, вам просто нужно

<div id="dialog" style="display: none;">

// form here
</div>

, чтобы при начальной загрузке страницы диалог и форма были скрыты до тех пор, пока они не потребуются.

Редактировать: и получить сортируемую для перезагрузки с AJAX

if (bValid) {
    $.ajax({
      type: "POST",
      url: "server_items_reorder.php",
      data: 'tid=' + portlet_to_edit + '&title=' + name.val(),
      success: function() { $('.portlet').sortable('refresh'); }
    });
    $(this).dialog('close'); 
}