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> 

這樣，當頁面最初加載，對話框和表格將被隱藏，直到需要。

編輯：，並獲得排序從阿賈克斯重新加載

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