Place form Inside Window Error

[joko.pitoyoParticipant]

HTML Tag

  <div id="form1">
        <div>Title</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');
}

ERROR

jqx-all.js:191 Uncaught Error: Invalid structure!
    at c.<computed>._createStructure (jqx-all.js:191)
    at c.<computed>.createInstance (jqx-all.js:191)
    at Object.b.jqx.applyWidget (jqx-all.js:15)
    at HTMLDivElement.<anonymous> (jqx-all.js:15)
    at Function.each (jquery-1.12.4.min.js:2)
    at n.fn.init.each (jquery-1.12.4.min.js:2)
    at n.fn.init.b.fn.<computed> [as jqxWindow] (jqx-all.js:15)
    at FormPoi.createElement (poi.js:15)
    at HTMLButtonElement.<anonymous> ((index):596)
    at HTMLButtonElement.dispatch (jquery-1.12.4.min.js:3)

[HristoParticipant]

Hello joko.pitoyo,

Could you clarify it?
What do you want to achieve?
I tested this example and it seems to work fine:
http://jsfiddle.net/prm2h8ts/

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[joko.pitoyoParticipant]

Helo

the mistake is :

 $("<div>header Title</div>").appendTo(this.window1);

above script will break rule of window structur like:

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

thank for support, i am in trial process, i hope work like charm

[Encontre todos os cassinosParticipant]

I had a similar problem, thanks for the information.

[Author]

Posts