jQuery UI 对话框和可排序列#dialog 类问题

Question

我成功地为现有的 CMS 创建了一个可排序的 portlet 系统。 我还制作了一个对话框弹出窗口，我可以在其中更改真正的表单标题以及将来在每个 portlet 的对话框中的更多内容。

但是，我的问题是#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'); 
}