jQuery UI Widgets Forums Dialogs and Notifications Window Unable to include a form inside jqxwindow

This topic contains 3 replies, has 4 voices, and was last updated by  Hristo 3 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Unable to include a form inside jqxwindow #50296

    jignyasa
    Participant

    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


    Dimitar
    Participant

    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/

    Unable to include a form inside jqxwindow #114292

    joko.pitoyo
    Participant

    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');
    }
    
    Unable to include a form inside jqxwindow #114297

    Hristo
    Participant

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.