MVC Datatables Dialog Not staying where dialog opens
Posted
by
Anthoney Hanks
on Stack Overflow
See other posts from Stack Overflow
or by Anthoney Hanks
Published on 2013-06-25T16:45:05Z
Indexed on
2013/06/25
22:21 UTC
Read the original article
Hit count: 237
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
});
},
© Stack Overflow or respective owner
