开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜