Is it possible to have a form inside jqx window?

[nickgowdyParticipant]

Hello,

I am using a jqx Window with a form for user settings and I have noticed that the form HTML isn’t inside the form tags. I’ve written the HTML inside the form but because you have to press a button to display the window, the HTML is outside of it.

<input type="button" value="User Settings" onclick="$('#jqxwindow-settingstop').jqxWindow('open');" />

@using (Html.BeginForm("_UserSettings", "User", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div id='jqxWidget'>
        <div id='jqxwindow-settingstop'>
            <div id="windowHeader">
                <span>
                    <img src="@Url.Content("~/AMTImages/Icons/user_edit.png")" />&nbsp; User Settings
                </span>
            </div>
            <div id='jqxWidget' style="overflow: hidden; padding: 10px;">
                <table>
                    <tr>
                        <td><img src="@Url.Content("~/AMTImages/UserAvatar.png")" width="64" height="64" style="border: thin solid" /></td>
                        <td></td>
                        <td></td>
                        <td>
                            <table>
                                <tr>
                                    <td>@Html.LabelFor(m => m.DisplayName, "Display Name: ")</td>
                                    <td style="padding-left: 10px;">@Html.TextBoxFor(m => m.DisplayName)</td>
                                </tr>
                                <tr>
                                    <td>@Html.LabelFor(m => m.UserImage, "User Image: ")</td>
                                    <td style="padding-left: 10px; float: right;">@Html.TextBoxFor(m => m.UserImage, new { type = "file", accept = "image/*" })</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

                <div id='jqxWidget'>
                    <div id="docking" style="margin-top: 10px;">
                        <div>
                            <div id="window1">
                                <div id="windowHeader">
                                    <span>
                                        Options
                                    </span>
                                </div>
                                <div style="height:700px;">
                                    <table>
                                        <tr>
                                            <td>@Html.LabelFor(m => m.AutoCompleteTelephoneEnquiry, "Auto Complete Telephone Enquiry")</td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnAutoCompleteTelephoneEnquiry">
                                                  @Html.HiddenFor(m => m.AutoCompleteTelephoneEnquiry, new {id = "hdnAutoCompleteTelephoneEnquiry"})
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>@Html.LabelFor(m => m.AutoWorkflowOfEnquiry, "Auto Work flow Of Enquiry")</td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnAutoWorkflowOfEnquiry">
                                                    @Html.HiddenFor(m => m.AutoWorkflowOfEnquiry, new { id = "hdnAutoWorkflowOfEnquiry" })
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>@Html.LabelFor(m => m.AutoCompleteMacEnquiry, "Auto Complete MAC Enquiry")</td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnAutoCompleteMacEnquiry">
                                                    @Html.HiddenFor(m => m.AutoWorkflowOfEnquiry, new { id = "hdnAutoCompleteMacEnquiry" })
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>@Html.LabelFor(m => m.BccAutomaticallyOnMySentEmails, "BCC Automatically On My Sent Emails")</td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnBccAutomaticallyOnMySentEmails">
                                                    @Html.HiddenFor(m => m.AutoWorkflowOfEnquiry, new { id = "hdnBccAutomaticallyOnMySentEmails" })
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>@Html.LabelFor(m => m.BccEmailAddres, "BCC Email Address")</td>
                                            <td>
                                                @Html.TextBoxFor(m => m.BccEmailAddres, new { style = "width: 100%; text-align: right" })
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>@Html.LabelFor(m => m.ContactSearchFocus, "Contact Search Focus")</td>
                                            <td>
                                                @Html.DropDownListFor(m => m.ContactSearchFocus, Model.ContactSearchFocusList, new { style = "width: 100%; text-align: right" })
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>@Html.LabelFor(m => m.SelectedDepartment, "Default Department")</td>
                                            <td>
                                                @Html.DropDownListFor(m => m.SelectedDepartment, Model.DepartmentList, new { style = "width: 100%; text-align: right" })
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>@Html.LabelFor(m => m.DefaultKeyword, "Default Keyword")</td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnDefaultKeyword">
                                                    @Html.HiddenFor(m => m.DefaultKeyword, new { id = "hdnDefaultKeyword" })
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>@Html.LabelFor(m => m.DefaultAdvisor, "Default Advisor")</td>
                                            <td>
                                                @Html.DropDownListFor(m => m.SelectedAdvisor, Model.AdvisorsList, new { style = "width: 100%; text-align: right" })
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>@Html.LabelFor(m => m.AutoSignature, "Display Autosignature")</td>
                                            <td>
                                                @Html.TextAreaFor(m => m.AutoSignature, new { id = "AutoSignature", style = "height: 100%;" })
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>@Html.LabelFor(m => m.DefaultTheme, "Default Theme")</td>
                                            <td>
                                                @Html.TextBoxFor(m => m.DefaultTheme, new { style = "width: 100%; text-align: right" })
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>@Html.LabelFor(m => m.SearchBySurnameWarning, "Search By Surname Warning")</td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnSearchBySurnameWarning">
                                                    @Html.HiddenFor(m => m.AutoWorkflowOfEnquiry, new { id = "hdnSearchBySurnameWarning" })
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>@Html.LabelFor(m => m.EnquiryConfirmationSearchFocus, "Enquiry Confirmation Search Focus")</td>
                                            <td>
                                                @Html.DropDownListFor(m => m.EnquirySearchFocus, Model.EnquirySearchFocusList, new { style = "width: 100%; text-align: right" })
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>@Html.LabelFor(m => m.ViewEmailPreviewPane, "Default Department")</td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnViewEmailPreviewPane">
                                                    @Html.HiddenFor(m => m.AutoWorkflowOfEnquiry, new { id = "hdnViewEmailPreviewPane" })
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>@Html.LabelFor(m => m.OutOfOffice, "Out Of Office")</td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnOutOfOffice">
                                                    @Html.HiddenFor(m => m.AutoWorkflowOfEnquiry, new { id = "hdnOutOfOffice" })
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>@Html.LabelFor(m => m.AutomaticEmailSearch, "Automatic Email Search")</td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnAutomaticEmailSearch">
                                                    @Html.HiddenFor(m => m.AutoWorkflowOfEnquiry, new { id = "hdnAutomaticEmailSearch" })
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>@Html.LabelFor(m => m.EnquirerDetailsPopup, "Enquirer Details Popup")</td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnEnquirerDetailsPopup">
                                                    @Html.HiddenFor(m => m.AutoWorkflowOfEnquiry, new { id = "hdnEnquirerDetailsPopup" })
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="submit" value="Save" id="btnSubmitSettings" /></td>
                                        </tr>
                                    </table>
                                    <br />
                                    
                                    

                                    <table width="100%">
                                        <tr>
                                            <td style="float: right;"></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

This is how my HTML renders:

<form action="/User/_UserSettings" enctype="multipart/form-data" method="post"><script type="text/javascript">
    function initUserSettings() {
        $("#jqxwindow-settingstop").jqxWindow({
            width: 500,
            height: 850,
            maxHeight: 850,
            autoOpen: false,
            draggable: true,
        });

        $('#docking').jqxDocking({ orientation: 'horizontal', width: 480, mode: 'docked' });
        $('#docking').jqxDocking('disableWindowResize', 'window1');

        $('#window1').jqxWindow({
            showCloseButton: false,
            draggable: false,
            width: 470,
            height: 700,
        });

        $('#AutoSignature').jqxEditor({
            tools: "bold italic underline"
        });

        $('#btnAutoCompleteTelephoneEnquiry').jqxSwitchButton({ height: 27, width: 81, checked: 'False' == 'True' ? true : false });
        $('#btnAutoWorkflowOfEnquiry').jqxSwitchButton({ height: 27, width: 81, checked: 'False' == 'True' ? true : false });
        $('#btnAutoCompleteMacEnquiry').jqxSwitchButton({ height: 27, width: 81, checked: 'False' == 'True' ? true : false });
        $('#btnBccAutomaticallyOnMySentEmails').jqxSwitchButton({ height: 27, width: 81, checked: 'False' == 'True' ? true : false });
        $('#btnSearchBySurnameWarning').jqxSwitchButton({ height: 27, width: 81, checked: 'False' == 'True' ? true : false });
        $('#btnViewEmailPreviewPane').jqxSwitchButton({ height: 27, width: 81, checked: 'True' == 'True' ? true : false });
        $('#btnOutOfOffice').jqxSwitchButton({ height: 27, width: 81, checked: 'False' == 'True' ? true : false });
        $('#btnAutomaticEmailSearch').jqxSwitchButton({ height: 27, width: 81, checked: 'False' == 'True' ? true : false });
        $('#btnEnquirerDetailsPopup').jqxSwitchButton({ height: 27, width: 81, checked: 'True' == 'True' ? true : false });
        $('#btnDefaultKeyword').jqxSwitchButton({ height: 27, width: 81, checked: 'True' == 'True' ? true : false });
    }
</script>

<input type="button" value="User Settings" onclick="$('#jqxwindow-settingstop').jqxWindow('open');" />

    <div id='jqxWidget'>
        <div id='jqxwindow-settingstop'>
            <div id="windowHeader">
                <span>
                    <img src="/AMTImages/Icons/user_edit.png" />&nbsp; User Settings
                </span>
            </div>
            <div id='jqxWidget' style="overflow: hidden; padding: 10px;">
                <table>
                    <tr>
                        <td><img src="/AMTImages/UserAvatar.png" width="64" height="64" style="border: thin solid" /></td>
                        <td></td>
                        <td></td>
                        <td>
                            <table>
                                <tr>
                                    <td><label for="DisplayName">Display Name: </label></td>
                                    <td style="padding-left: 10px;"><input id="DisplayName" name="DisplayName" type="text" value="Nick Gowdy" /></td>
                                </tr>
                                <tr>
                                    <td><label for="UserImage">User Image: </label></td>
                                    <td style="padding-left: 10px; float: right;"><input accept="image/*" id="UserImage" name="UserImage" type="file" value="" /></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

                <div id='jqxWidget'>
                    <div id="docking" style="margin-top: 10px;">
                        <div>
                            <div id="window1">
                                <div id="windowHeader">
                                    <span>
                                        Options
                                    </span>
                                </div>
                                <div style="height:700px;">
                                    <table>
                                        <tr>
                                            <td><label for="AutoCompleteTelephoneEnquiry">Auto Complete Telephone Enquiry</label></td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnAutoCompleteTelephoneEnquiry">
                                                  <input data-val="true" data-val-required="The AutoCompleteTelephoneEnquiry field is required." id="hdnAutoCompleteTelephoneEnquiry" name="AutoCompleteTelephoneEnquiry" type="hidden" value="False" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="AutoWorkflowOfEnquiry">Auto Work flow Of Enquiry</label></td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnAutoWorkflowOfEnquiry">
                                                    <input data-val="true" data-val-required="The AutoWorkflowOfEnquiry field is required." id="hdnAutoWorkflowOfEnquiry" name="AutoWorkflowOfEnquiry" type="hidden" value="False" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="AutoCompleteMacEnquiry">Auto Complete MAC Enquiry</label></td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnAutoCompleteMacEnquiry">
                                                    <input id="hdnAutoCompleteMacEnquiry" name="AutoWorkflowOfEnquiry" type="hidden" value="False" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="BccAutomaticallyOnMySentEmails">BCC Automatically On My Sent Emails</label></td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnBccAutomaticallyOnMySentEmails">
                                                    <input id="hdnBccAutomaticallyOnMySentEmails" name="AutoWorkflowOfEnquiry" type="hidden" value="False" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="BccEmailAddres">BCC Email Address</label></td>
                                            <td>
                                                <input id="BccEmailAddres" name="BccEmailAddres" style="width: 100%; text-align: right" type="text" value="" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="ContactSearchFocus">Contact Search Focus</label></td>
                                            <td>
                                                <select id="ContactSearchFocus" name="ContactSearchFocus" style="width: 100%; text-align: right"><option selected="selected" value="7">MemberNumber</option>
<option value="8">Surname</option>
<option value="9">Postcode</option>
<option value="10">Email</option>
</select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="SelectedDepartment">Default Department</label></td>
                                            <td>
                                                <select id="SelectedDepartment" name="SelectedDepartment" style="width: 100%; text-align: right"><option value="1">Botany</option>
<option value="2">Entomology</option>
<option value="3">Pathology</option>
<option selected="selected" value="4">Horticulture</option>
<option value="5">Assistant Advisors</option>
<option value="6">Members Advisory Centre</option>
<option value="7">Soils</option>
<option value="8">Other</option>
</select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="DefaultKeyword">Default Keyword</label></td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnDefaultKeyword">
                                                    <input data-val="true" data-val-required="The DefaultKeyword field is required." id="hdnDefaultKeyword" name="DefaultKeyword" type="hidden" value="True" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="DefaultAdvisor">Default Advisor</label></td>
                                            <td>
                                                <select id="SelectedAdvisor" name="SelectedAdvisor" style="width: 100%; text-align: right"><option value="1">Guy Barter</option>
<option value="6">Leigh Hunt</option>
<option value="7">Nicola Bristow</option>
<option value="8">Anne Adam</option>
<option value="10">Helen Bostock</option>
<option value="12">Lenka Cooke</option>
<option selected="selected" value="16">Jenny Bowden</option>
<option value="17">Rebekah Mealey</option>
<option value="20">Laurel Emms</option>
<option value="22">Jim England</option>
<option value="24">Trish George</option>
<option value="26">Victoria Coupland</option>
<option value="27">Tony Dickerson</option>
<option value="28">Rob Stirling</option>
<option value="29">Geoff Denton</option>
</select>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td><label for="AutoSignature">Display Autosignature</label></td>
                                            <td>
                                                <textarea cols="20" id="AutoSignature" name="AutoSignature" rows="2" style="height: 100%;">
</textarea>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td><label for="DefaultTheme">Default Theme</label></td>
                                            <td>
                                                <input id="DefaultTheme" name="DefaultTheme" style="width: 100%; text-align: right" type="text" value="" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="SearchBySurnameWarning">Search By Surname Warning</label></td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnSearchBySurnameWarning">
                                                    <input id="hdnSearchBySurnameWarning" name="AutoWorkflowOfEnquiry" type="hidden" value="False" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="EnquiryConfirmationSearchFocus">Enquiry Confirmation Search Focus</label></td>
                                            <td>
                                                <select id="EnquirySearchFocus" name="EnquirySearchFocus" style="width: 100%; text-align: right"><option selected="selected" value="45">Telephone Enquiry- Member Number</option>
<option value="46">Telephone Enquiry- Postcode</option>
<option value="47">MAC Enquiry- Member Number</option>
<option value="48">MAC Enquiry- Postcode</option>
<option value="49">Letter Enquiry- Member Number</option>
<option value="50">Letter Enquiry- Postcode</option>
<option value="51">InPerson Enquiry- Member Number</option>
<option value="52">InPerson Enquiry- Postcode</option>
</select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="ViewEmailPreviewPane">Default Department</label></td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnViewEmailPreviewPane">
                                                    <input id="hdnViewEmailPreviewPane" name="AutoWorkflowOfEnquiry" type="hidden" value="False" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="OutOfOffice">Out Of Office</label></td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnOutOfOffice">
                                                    <input id="hdnOutOfOffice" name="AutoWorkflowOfEnquiry" type="hidden" value="False" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="AutomaticEmailSearch">Automatic Email Search</label></td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnAutomaticEmailSearch">
                                                    <input id="hdnAutomaticEmailSearch" name="AutoWorkflowOfEnquiry" type="hidden" value="False" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="EnquirerDetailsPopup">Enquirer Details Popup</label></td>
                                            <td class="buttons" style="text-align: right; padding-left: 10px;">
                                                <div style="float: right;" id="btnEnquirerDetailsPopup">
                                                    <input id="hdnEnquirerDetailsPopup" name="AutoWorkflowOfEnquiry" type="hidden" value="False" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="submit" value="Save" id="btnSubmitSettings" /></td>
                                        </tr>
                                    </table>
                                    <br />
                                    
                                    

                                    <table width="100%">
                                        <tr>
                                            <td style="float: right;"></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

[DimitarParticipant]

Hello nickgowdy,

You have three HTML elements with an id jqxWidget. This is not correct and may be causing unexpected behaviour. Please also make sure you initialize your jqxWindow (and any other widgets) on $(document).ready(). Widgets and other elements that need initialization in jqxWindow should be initialized in its initContent callback function.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts