Unable to include a form inside jqxwindow

[jignyasaParticipant]

Hi,

I am trying to include a file upload form inside a jqx window.
But once the window has form tags, it does not show them. So how do i achieve this?

jsp for window:

<div id=”cfgFileUploadWindow” style=”display: none”>
<div id=”cfgFileUploadHeader” align=”center”>
<b>Upload Config File</b>
</div>
<form:form name=”FileUploadForm” enctype=”multipart/form-data”>
<div id=”FileUploadDiv”>
<label for=”FileInput”>* Please select a file to upload :
</label> <input type=”file” name=”FileInput” value=”Upload Files”
id=”FileInput” onchange=”return false;” /> <br /> <br />
<input type=”hidden” name=”id” value=<%=request.getParameter(“id”) %>>

<div class=”row” style=”position: relative; top: 20px;”>

<div class=”col-lg-4″></div>
<div class=”col-lg-4″>
<button class=”btn btn-primary btn-sm” title=”Upload File”
id=’FileUploadBtn’ onClick=”return false;”>Upload
File</button>
</div>
<div class=”col-lg-4″></div>

</div>
</div>
</form:form>

</div>

js file:
function _addEventListeners(){

$(‘#FileUploadLnk’).click(function () {

$(‘#FileUploadWindow’).jqxWindow(‘open’);

});
$(‘#FileUploadBtn’).click(function () {

$(‘#FileInput’).ajaxfileupload({
‘action’: contextPath+”/uploadfile.htm?id=”+id,
‘onComplete’: function(response) {

alert(“File SAVED!!”);
},
‘onStart’: function() {
console.log(‘upload the file’);
}
});
});

};

function _createWindow(){

$(‘#FileUploadWindow’).jqxWindow({showCollapseButton: true,
maxHeight: 400,
maxWidth: 850,
minHeight: 150,
minWidth: 850,
height: 150,
width: 850,
theme: ‘energyblue’,
isModal: true,
autoOpen:false});

};

return {
config: {
theme:’energyblue’
},
init: function () {

//Attaching event listeners
_addEventListeners();
//Adding jqxWindow
_createWindow();
}
};
Thanks,
Jignyasa

[DimitarParticipant]

Hello Jignyasa,

This issue occurs because the window requires a particular HTML structure to be initialized correctly:

<div id='jqxwindow'>
    <div>
        Header</div>
    <div>
        Content</div>
</div>

Please put your form inside the div with id FileUploadDiv so the required structure is preserved.

Best Regards,
Dimitar

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

[joko.pitoyoParticipant]

HTML Tag

  <div id="form1">
        <div>Tambah Data</div>
        <div>
            <div id='sampleForm' style="width: 400px; height: auto;"></div>
        </div>
    </div>

Javascript

function FormPoi() {
}
FormPoi.prototype.createElement = function () {
    this.window1 = $("#form1");
    $("<div>header Title</div>").appendTo(this.window1);

    this.window1.jqxWindow({
        width: 400,height:440,resizable:true,draggable:true,
        initContent: function () {
            console.log('initContent window');
            var template = [
                {
                    bind: 'firstName',
                    type: 'text',
                    label: 'First name',
                    required: true,
                    labelWidth: '80px',
                    width: '250px',
                    info: 'Enter first name',
                    infoPosition: 'right'
                },
                {
                    bind: 'lastName',
                    type: 'text',
                    label: 'Last name',
                    required: true,
                    labelWidth: '80px',
                    width: '250px',
                    info: 'Enter last name'
                },
                {
                    bind: 'company',
                    type: 'text',
                    label: 'Company',
                    required: false,
                    labelWidth: '80px',
                    width: '250px'
                },
                {
                    bind: 'address',
                    type: 'text',
                    label: 'Address',
                    required: true,
                    labelWidth: '80px',
                    width: '250px'
                },
                {
                    bind: 'city',
                    type: 'text',
                    label: 'City',
                    required: true,
                    labelWidth: '80px',
                    width: '250px'
                },
                {
                    bind: 'state',
                    type: 'option',
                    label: 'State',
                    required: true,
                    labelWidth: '80px',
                    width: '250px',
                    component: 'jqxDropDownList',
                    options: [
                        { value: 'California' },
                        { value: 'New York' },
                        { value: 'Oregon' },
                        { value: 'Illinois' },
                        { value: 'Texas' }
                    ]
                },
                {
                    bind: 'zip',
                    type: 'text',
                    label: 'Zip code',
                    required: true,
                    labelWidth: '80px',
                    width: '250px'
                },
                {
                    type: 'blank',
                    rowHeight: '10px'
                },
                {
                    columns: [
                        {
                            type: 'button',
                            text: 'Sign up',
                            width: '90px',
                            height: '30px',
                            rowHeight: '40px',
                            columnWidth: '50%',
                            align: 'right'
                        },
                        {
                            type: 'button',
                            text: 'Cancel',
                            width: '90px',
                            height: '30px',
                            rowHeight: '40px',
                            columnWidth: '50%'
                        }
                    ]
                }
            ];
            var sampleValue = {
                firstName: 'John',
                lastName: 'Scott',
                address: '1st Ave SW',
                company: 'N/A',
                city: 'San Antonio',
                state: 'Texas',
                zip: '78209'
            };
            $('#sampleForm').jqxForm({
                template: template,
                value: sampleValue,
                padding: { left: 10, top: 10, right: 10, bottom: 10 }
            });

        }
    });

}

FormPoi.prototype.open = function () {
    this.window1.jqxWindow('open');
}

[HristoParticipant]

Hello joko.pitoyo,

Could you clarify your case?
If you have any questions related to our library, please, let me know.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts