0

在列表的AllItems頁面上,我在顯示列表的webpart上方添加了內容編輯器WebPart。這個webpart只包含一個HTML按鈕。當用戶點擊按鈕時,列表中的所有項目都將被多個JavaScript/jQuery/AJAX函數處理。但是該列表包含1000多個項目,並且不會讓用戶知道代碼正在處理項目。未在SharePoint 2007中居中的jQuery模式對話框

首先,出於開發目的,我在方法之間使用警報來顯示某種交互性並向用戶提供信息。但是現在我正在使用jQuery模態對話框以一種很好的方式向用戶顯示代碼正在處理項目。

顯示對話框,但它不在屏幕上居中顯示,標題欄未顯示在對話框的整個寬度上,並且透明灰色疊加層不可見。我在一個空的ASP.NET Web應用程序中測試了完全相同的代碼,在這種情況下,一切正常。

我使用jQuery 1.8.2和jQuery UI 1.10.1。反正這是我有:

function showProcessDialog() { 
    showDialog("Please wait while processing all items...", null); 
} 

function showDialog(message, dialogButtons) { 
    $("#messageContainer").text(message); 
    $('#dialog-message').parent().appendTo($('form:first')); 
    $("#dialog-message").dialog({ 
     draggable: false, 
     height: "auto", 
     modal: true, 
     open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }, 
     position: { my: "center", at: "center", of: window }, 
     resizable: false, 
     width: 400, 
     buttons: dialogButtons 
    }); 
} 

注意這一行:

$('#dialog-message').parent().appendTo($('form:first')); 

我讀到,當一個頁面在SharePoint 2007中加載,jQuery的操縱DOM和,這將作爲行動的DIV元素對話框放置在身體的外部。這樣做的最大問題是對話框中沒有服務器端控件會繼續工作,並且此行將div放回到窗體中。我離開那裏,因爲你永遠不知道...

這是導致ASP.NET Web應用程序:

Working in ASP.NET Web Application

而且這是在SharePoint 2007中相同的代碼:

Not working in SharePoint 2007

有誰知道我該如何解決這個問題,以便結果與工作相同?提前致謝!

回答

1

我在,我是在嘗試升級到最新的應用程序完全相同的問題jQuery和jQuery UI的版本。我正在運行IE 8(7模式)。

我可以告訴你,我升級之前的工作是jQuery 1.6.2和jQuery UI 1.8.16。最終,我轉回到了這些版本,因爲客戶很快就升級到了SP 2010,解決這個問題並不值得花費麻煩。

$('#search-modal').dialog({ autoOpen: false, bgiframe: true, modal: true, width: 400, height: 550, resizable: false }); 
    $('#search-modal').dialog('open'); 
    $('#search-modal').parent().appendTo($("form:first")); 

祝你好運!

+0

問題是我無法使用較低版本的jQuery/UI。還有其他代碼片斷取決於我使用的版本... – Abbas 2013-03-05 09:25:03

1

我在這裏創建了一個非常簡化的版本,您可以測試。它看起來像從樣式中,一些jquery-ui項目沒有正確加載,你看過Chrome的調試器/螢火蟲的「網絡」部分,看看是否有任何項目沒有被加載?

function showDialog(message, dialogButtons) { 
    var dialog1 = $('<div id="main_content" class="ui-widget" title="Documents"></div>'); 
    $(dialog1).html(message); 
    $(dialog1).dialog({ width: 200, height: 200, position: "center" ,modal:true}); 
} 

你試過手動改變對話框DOM元素與CSS來居中,就像這樣:

.center 
{ 
    margin-left:auto; 
    margin-right:auto; 
    width:70%; 
} 
+0

謝謝你的想法,但是這給出了和我一樣的結果。 – Abbas 2013-02-27 13:20:38

+0

上面更新了我的回答,你有沒有嘗試過一些手動的CSS干預? – jjay225 2013-02-27 13:30:44

+0

不,CSS不會改變任何東西...:S – Abbas 2013-02-27 15:21:37

0

問題出在IE文檔模式下。默認情況下,SP2007頁面呈現在Compatibility mode中,因爲正如上述註釋中所述,IE進入了怪異模式。這就是它與ASP解決方案不同的原因。
如果切換到IE7 +文檔模式 - jQuery可以工作,但是您可能會遇到一些與渲染共享點頁面相關的新問題。

在這種情況下,我更喜歡使用custom js,因爲它更靈活。居中的div你應該改變顯示按鈕的onclick行爲如下:

pos = get_scroll(); 
$("#dialog").css({ 
    'top': pos.y, 
    'left': pos.x + window.screen.availWidth/2, 
    'margin-left': 50} 
).show(); 

正如你可以看到你也已經在這裏有關閉按鈕的問題,以後如果內容格比對話框的div更大會遇到溢出問題。