MVC Datatables Dialog Not staying where dialog opens
- by Anthoney Hanks
I have created a view that displays a datatable with a clickable link that opens a jQuery UI dialog box. The users wanted a search options (8 dropdowns to narrow the search) at top of page, followed by the datatable with the 100 viewable records.
If I scroll down the datatable to the bottom viewable record, click the link to open the dialog box. The dialog opens relative to the link clicked, but the focus go back to the top of the page which causes the user to have scroll back down to the dialog box.
Ok, I thought I would just set the focus to the dialog box. BUt it is being ignored which make me think that this is something within the MVC realm. I even tried to wrap the focus inside a ready function thinking it would be one of the last things process.
When I define the dailog, it is pretty basic. I even tried to set the position attribute, but it did not change the problem.
Has someone had this problem and can send me in the right direction?
View building the datatable:
<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>
Dialog box code:
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
});
},
