Unresponsive inputs in partial view containing a form, inside a JQuery Dialog
The issue I am having is that the elements I display in my form (inputs, dropdowns, etc) are completely unresponsive when the form is placed in a dialog. I cannot click them (even the dropdowns), and I can't change their values (they are not marked read-only). This changes when I remove the enclosing form tags - all of the inputs can be accessed correctly when the form tags are absent.
As some background, the form is in a partial view, which is displayed in a JQuery
dialog. I unfortunately need the form functionality, as I want to be able to easily get at the formcollection on the controller side (I'm using MVC
).
This seems to be an implementation-agnostic problem, but I can post some code if it will help. Thank you in advance!
EDIT: This is the JQuery
I'm using to open the dialog, with comments for some of the more obscure parts.
_detailsDialog = $("#modal-ProductDetails").dialog({
autoOpen: false,
draggable: false,
modal: true,
resizable: false,
width: 'auto',
title: 'Item Details',
buttons: {
"Add": function () { ItemsGridView.addItemToShoppingCartFromDialog(); $(this).dialog('close'); },
"Cancel": function () { $(this).dialog('close'); }
}
});
$('#itemSummary').load( //itemSummary is a div in the View
_getEditItemViewUrl, //A URL pointing to the postback action
{ baseItemNumber: baseItemNumber },
function () {
_detailsDialog.dialog('open');
}
);
Edit: This is the partial view code:
<%@ Control Language="C#" Inherits="System.开发者_C百科Web.Mvc.ViewUserControl<Pandora.B2B.Web.Models.CatalogItemViewModel>" %>
<div>
<h3>Add / Edit Item</h3>
<% using (Html.BeginForm("EditItem", "CatalogAdmin", FormMethod.Post))
{ %>
<div class="validation-summary-errors">
</div>
<div class="floatLeft">
<%: Html.TextBox("txtReqdDescription", Model.Description, new { @class = "editableField" }) %>
</div>
<% } %>
</div>
Check to make sure the dialog isn't actually hidden behind another div. Also check on the z-indexes of the form and it's children and make sure they're above the z-index of the div they're inside in the dialog.
If you push tab a bunch of times are you able to select/change any of the fields with just the keyboard? It could be that there is some sort of layering issue maybe a hidden div on top of the form fields?
Hard to say really without seeing any code.
Are you sure that the view is creating a closing tag for the </form>
? If that's not the problem, please use jsFiddle to create a code example and post it back here.
精彩评论