jQuery UI dialog and sortable columns #dialog class issue

I succeed in creating a sortable portlet system for a existing CMS. I also made a dialog popup where I can change true a form the title and in the future some more content within the dialog for each portlet.

However, my issue is that the #dialog shows the form inside my page before I click the icon. When I click the icon, the form is removed from the page and shows nicely inside the dialog. I understand why it does that, but I can't solve it.

Here's my 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');
            }); 

I know that it should be something like this (jQuery sample):

$("#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');
        })
   

But then the function does not update my $.ajax.

If I understand your problem correctly, I think you just need

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

// form here
</div>

so that when the page initially loads, the dialog and form will be hidden until needed.

Edit: and to get the sortable to reload from 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'); 
}