2013-06-25 28 views
-1

我創建了一個視圖,該視圖顯示帶有可打開jQuery UI對話框的可單擊鏈接的數據表。用戶希望在頁面頂部有一個搜索選項(8個下拉框縮小搜索範圍),然後是帶有100個可查看記錄的數據表。MVC Datatables對話框不停留在對話框打開的地方

如果我將數據表向下滾動到底部可查看記錄,單擊鏈接打開對話框。該對話框相對於單擊的鏈接打開,但焦點回到頁面的頂部,導致用戶向下滾動到對話框。

好吧,我想我只是將焦點設置到對話框。它被忽略,這讓我覺得這是MVC領域內的事情。我甚至試圖把焦點放在一個準備就緒的函數中,認爲這將是最後一個過程。

當我定義dailog時,它非常基礎。我甚至試圖設置位置屬性,但它並沒有改變問題。

有人有這個問題,可以發送我在正確的方向嗎?

觀構建數據表:

<table id="navDatatables"> 
    <tbody> 
     @foreach (var detailsVM in Model.DetailsVMs) 
     { 
      <tr> 
       <td class="standardTable"> 
        <a href="#" onclick="return PVE_UseConfig.Options(@detailsVM.ConfigVersionId, @Model.UseConfigModeId);" class="smallLink">Options</a> 
       </td> 
       <td class="standardTable"> 
        <a href="@Url.Content(@detailsVM.ViewerUrl)" target="_blank">@detailsVM.ConfigName</a> 
       </td> 
       <td class="standardTable">@detailsVM.ConfigType</td> 
       <td class="standardTable">@detailsVM.ConfigVersionState</td> 
       <td class="standardTable">@detailsVM.Organization</td> 
       <td class="standardTable">@detailsVM.ProcessSet</td> 
       <td class="standardTable">@detailsVM.ConfigVersionCaption</td> 
       <td class="standardTable">@detailsVM.ConfigId</td> 
       <td class="standardTable">@detailsVM.ConfigVersionId</td> 
       <td class="standardTable">@detailsVM.ConfigOwnerName</td> 
       <td class="standardTable">@detailsVM.ConfigVersionLastModified</td> 
      </tr> 
     } 
    </tbody> 
</table> 

對話框代碼:

Options: function (configVersionId, useConfigModeId) { 
    var output = '#modalDialog1'; 
    var postData = { configVersionId: configVersionId, useConfigModeId: useConfigModeId }; 

    $('#modalDialog1').dialog("destroy"); 

    $.ajax({ 
     url: PVE_RootUrl + 'UseConfig/Options', 
     type: 'POST', 
     async: false, 
     data: postData, 
     success: function (result) { 
      $(output).html(result); 
     }, 
     error: function (jqXHR, textStatus, errorThrown) { 
      var text = jqXHR.responseText; 
      var from = text.search("<body>") + 6; 
      var to = text.search("</body>") - 7; 
      $(output).html(text.substring(from, to)); 
     } 
    }); 

    $(output).dialog({ 
     title: "Configuration Options", 
     modal: true, 
     height: 550, 
     width: 600, 
     resizable: false, 
     draggable: false 
    }); 
}, 
+0

顯示您的代碼,請 –

回答

0

好吧,我想出了我的問題修復。我添加了下面的代碼。變量[output]是對話框的元素。變量[selector]是鏈接點擊的對象。所以,我放了一段時間讓一切完成,然後我設置焦點並創建對話框。

我的解決方案:

 //Add this time out function to ensure that the window is loaded. 
    var fnTimeout = function() { 
     setTimeout(function() { 

      if (window.document.readyState == "complete") { 
       $(selector).focus(); 
       var position = $(selector).position(); 
       window.scrollTo(position.left, position.top); 

       $(output).dialog({ 
        title: "Configuration Options", 
        modal: true, 
        height: 550, 
        width: 600, 
        resizable: false, 
        draggable: false 
       }); 
      } 
      else { 
       fnTimeout(); 
      } 
     }, 100); 
    }; 

    fnTimeout();