Selected value from dropdown is not output from jquery dialog

I have a jQuery dialog. All fields are published correctly, except for dropdowns, the value is set to null, not the selected value.

    <div id="popupCreateCompany" title="Create a new company"> 
    <form>
    <fieldset>
    <p>  
        <label for="company_name">Company Name:</label>
        <%= Html.TextBox("company_name") %>    
    </p>
    <p>
        <label for="company_desc">Company Description:</label>
        <%= Html.TextBox("company_desc") %>
    </p>  
    <p>
        <label for="address">Address:</label>
        <%= Html.TextBox("address") %>
    </p>
    <p>
        <label for="city">City:</label>
        <%= Html.TextBox("city") %>
    </p>
    <p>
        <label for="state">State:</label>
        <%= Html.TextBox("state") %>
    </p>
    <p>
        <label for="zip">Zip:</label>
        <%= Html.TextBox("zip") %>
    </p>
    <p>
        <label for="website">Website:</label>
        <%= Html.TextBox("website", "http:/") %>
    </p>
    <p>
        <label for="sales_contact">Sales Contact:</label>
        <%= Html.DropDownList("sales_contact", Model.SelectSalesContacts, "** Select Sales Contact **") %>
    </p>
    <p>
        <label for="primary_company">Primary Company:</label>
        <%= Html.DropDownList("primary_company", Model.SelectPrimaryCompanies, "** Select Primary Company **") %>

    </p>
    </fieldset>
    </form>

      

JQuery

 $('#popupCreateCompany').dialog(
                {
                    autoOpen: false,
                    modal: true,
                    buttons:
                    {
                        'Add': function() {
                            var dialog = $(this);
                            var form = dialog.find('input:text');
                            $.post('/company/create', $(form).serialize(), function() {
                                dialog.dialog('close');
                            })
                        },
                        'Cancel': function() {
                            $(this).dialog('close');
                        }
                    }
                });

        $("#create-company").click(function() {
            $('#popupCreateCompany').dialog('open');
        });

      

My SelectList definitions:

    public class SubcontractFormViewModel
{
    public subcontract Subcontract { get; private set; }
    public SelectList SelectPrimaryCompanies { get; set; }
    public MultiSelectList SelectService_Lines { get; private set; }
    public SelectList SelectSalesContacts { get; private set; }

    public SubcontractFormViewModel(subcontract subcontract)
    {
        SubcontractRepository subcontractRepository = new SubcontractRepository();

        Subcontract = subcontract;
        SelectPrimaryCompanies = new SelectList(subcontractRepository.GetPrimaryCompanies(), "company_id", "company_name");
        SelectService_Lines = new MultiSelectList(subcontractRepository.GetService_Lines(), "service_line_id", "service_line_name", subcontractRepository.GetSubcontractService_Lines(Subcontract.subcontract_id));
        SelectSalesContacts = new SelectList(subcontractRepository.GetContacts(), "contact_id", "contact_name");
    }
}

      

+2


a source to share


2 answers


Your problem is this line:

var form = dialog.find('input:text');

      

You are only serializing the <input>

elements, not other form elements.

You can add select items by changing this to



var form = dialog.find('input:text, select');

      

or

var form = dialog.find('input:text').add('select');

      

+3


a source


You need to make sure that the dialog is still in the message form, by default it is not:

$('#popupCreateCompany').dialog({
    autoOpen: false,
    modal: true,
    buttons:
    {
        'Add': function() {
            var dialog = $(this);
            var form = dialog.find('input:text');
            $.post('/company/create', $(form).serialize(), function() {
                dialog.dialog('close');
            })
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    }
}).parent().appendTo("#myFormID");

      



By default jQuery UI (and some other modalities too) are added to the generated modal end <body>

, so the actual element <select>

is outside of your form, that is, it is not included in the POST values.If you do .parent().appendTo()

as shown above, it will move the form-wrapped dialog , and must be posted correctly.

0


a source







All Articles