jQuery UI Widgets Forums Dialogs and Notifications Window Place form Inside Window Error

This topic contains 2 replies, has 2 voices, and was last updated by  joko.pitoyo 2 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Place form Inside Window Error #114293

    joko.pitoyo
    Participant

    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)
    
    • This topic was modified 2 years ago by  joko.pitoyo.
    Place form Inside Window Error #114304

    Hristo
    Participant

    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

    Place form Inside Window Error #114330

    joko.pitoyo
    Participant

    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

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

You must be logged in to reply to this topic.