jQuery UI Widgets Forums Form Jquery 3.3.1 and jqxform not an element?

Tagged: , ,

This topic contains 2 replies, has 2 voices, and was last updated by  Martin 5 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Jquery 3.3.1 and jqxform not an element? #102486

    Chaza96
    Participant

    I receive the following error when using jqxforms

    
    Uncaught TypeError: form.jqxform is not a function
        at HTMLDocument.<anonymous> (Login:99)
        at l (jquery-3.3.1.min.js:2)
        at c (jquery-3.3.1.min.js:2)
    

    Any suggestions on what may be causing this and how to fix it?

    The page looks like so…

    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Login</title>
        <link href="/Content/jqx.base.css" rel="stylesheet"/>
    <link href="/Content/jqx.arctic.css" rel="stylesheet"/>
    <link href="/Content/jqx.black.css" rel="stylesheet"/>
    <link href="/Content/jqx.bootstrap.css" rel="stylesheet"/>
    <link href="/Content/jqx.classic.css" rel="stylesheet"/>
    <link href="/Content/jqx.darkblue.css" rel="stylesheet"/>
    <link href="/Content/jqx.energyblue.css" rel="stylesheet"/>
    <link href="/Content/jqx.fresh.css" rel="stylesheet"/>
    <link href="/Content/jqx.highcontrast.css" rel="stylesheet"/>
    <link href="/Content/jqx.metro.css" rel="stylesheet"/>
    <link href="/Content/jqx.metrodark.css" rel="stylesheet"/>
    <link href="/Content/jqx.office.css" rel="stylesheet"/>
    <link href="/Content/jqx.orange.css" rel="stylesheet"/>
    <link href="/Content/jqx.shinyblack.css" rel="stylesheet"/>
    <link href="/Content/jqx.summer.css" rel="stylesheet"/>
    <link href="/Content/jqx.web.css" rel="stylesheet"/>
    <link href="/Content/jqx.ui-darkness.css" rel="stylesheet"/>
    <link href="/Content/jqx.ui-lightness.css" rel="stylesheet"/>
    <link href="/Content/jqx.ui-le-frog.css" rel="stylesheet"/>
    <link href="/Content/jqx.ui-overcast.css" rel="stylesheet"/>
    <link href="/Content/jqx.ui-redmond.css" rel="stylesheet"/>
    <link href="/Content/jqx.ui-smoothness.css" rel="stylesheet"/>
    <link href="/Content/jqx.ui-start.css" rel="stylesheet"/>
    <link href="/Content/jqx.ui-sunny.css" rel="stylesheet"/>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
    <link href="/Content/site.css" rel="stylesheet"/>
    
        <script src="/Scripts/modernizr-2.8.3.js"></script>
    
        <script type="text/javascript">
            window.onload = function () {
                document.getElementById('bodyContainer').style.visibility = 'visible';
            }
        </script>
        <link rel="stylesheet" href="../../Content/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="../../Scripts/jqxcore.js"></script>
        <script type="text/javascript" src="../../Scripts/jqxmenu.js"></script>
        
        <link rel="stylesheet" href="../../Content/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../Content/jqx.office.css" type="text/css" />
        <script type="text/javascript" src="../../Scripts/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="../../Scripts/jqxcore.js"></script>
        <script type="text/javascript" src="../../Scripts/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../Scripts/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../Scripts/jqxinput.js"></script>
        <script type="text/javascript" src="../../Scripts/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../Scripts/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../Scripts/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../Scripts/jqxradiobutton.js"></script>
        <script type="text/javascript" src="../../Scripts/jqxpasswordinput.js"></script>
        <script type="text/javascript" src="../../Scripts/jqxnumberinput.js"></script>
        <script type="text/javascript" src="../../Scripts/jqxform.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var template = [
                {
                    bind: 'UsernameValue',
                    type: 'text',
                    label: 'User Name:',
                    required: true,
                    labelWidth: '30%',
                    align: 'left',
                    width: '250px',
                    info: 'Enter Username',
                    infoPosition: 'right'
                },
                {
                    bind: 'PasswordValue',
                    type: 'Password',
                    label: 'Password:',
                    labelPosition: 'left',
                    labelWidth: '30%',
                    align: 'left',
                    width: '250px',
                    required: true
                },
                {
                    type: 'blank',
                    rowHeight: '20px'
                },
                {
                    name: 'submitButton',
                    type: 'button',
                    text: 'Submit Form Data',
                    align: 'right',
                    padding: { left: 0, top: 5, bottom: 5, right: 40 }
                }
            ];
    
            var form = $('#form');
    
            form.jqxform({
                template: template,
                padding: { left: 10, top: 10, right: 0, bottom: 10 }
            });
    
        })
    </script>
    
    </head>
    <body>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create a jqxMenu
            $("#Menu").jqxMenu({width: $(window).width, height:30});
        });
    </script>
    <div id="Menu">
        <ul>
                    <li><a><a href="/Login/ViewMeets">Meets</a></a></li>
                    <li><a><a href="/Login/Login">Log In</a></a></li>
    
        </ul>
    </div>
    <div id='bodyContainer' style='visibility: hidden;' class="container body-content">
        
    
    <h2>Login</h2>
    
    <div id="form"></div>
    
    </div>
    
    <script src="/Scripts/jquery-3.3.1.js"></script>
    
    <script src="/Scripts/bootstrap.js"></script>
    
    <script src="/Scripts/jqxcore.js"></script>
    <script src="/Scripts/jqxdata.js"></script>
    <script src="/Scripts/jqxgrid.js"></script>
    <script src="/Scripts/jqxgrid.selection.js"></script>
    <script src="/Scripts/jqxgrid.pager.js"></script>
    <script src="/Scripts/jqxlistbox.js"></script>
    <script src="/Scripts/jqxbuttons.js"></script>
    <script src="/Scripts/jqxscrollbar.js"></script>
    <script src="/Scripts/jqxdatatable.js"></script>
    <script src="/Scripts/jqxtreegrid.js"></script>
    <script src="/Scripts/jqxmenu.js"></script>
    <script src="/Scripts/jqxcalendar.js"></script>
    <script src="/Scripts/jqxgrid.sort.js"></script>
    <script src="/Scripts/jqxgrid.filter.js"></script>
    <script src="/Scripts/jqxdatetimeinput.js"></script>
    <script src="/Scripts/jqxdropdownlist.js"></script>
    <script src="/Scripts/jqxslider.js"></script>
    <script src="/Scripts/jqxeditor.js"></script>
    <script src="/Scripts/jqxinput.js"></script>
    <script src="/Scripts/jqxdraw.js"></script>
    <script src="/Scripts/jqxchart.core.js"></script>
    <script src="/Scripts/jqxchart.rangeselector.js"></script>
    <script src="/Scripts/jqxtree.js"></script>
    <script src="/Scripts/jqxbulletchart.js"></script>
    <script src="/Scripts/jqxcheckbox.js"></script>
    <script src="/Scripts/jqxradiobutton.js"></script>
    <script src="/Scripts/jqxvalidator.js"></script>
    <script src="/Scripts/jqxpanel.js"></script>
    <script src="/Scripts/jqxpasswordinput.js"></script>
    <script src="/Scripts/jqxnumberinput.js"></script>
    <script src="/Scripts/jqxcombobox.js"></script>
    
    </body>
    </html>
    
    • This topic was modified 5 years, 7 months ago by  Chaza96.

    Chaza96
    Participant

    Ive since downgraded it to 1.11.2 and managed to get it to work with a bit of tinkering 🙂

    Jquery 3.3.1 and jqxform not an element? #102500

    Martin
    Participant

    Hello Chaza96,

    The function is called jqxForm, not jqxforms. This is where the issue is coming form.
    Here is your Example updated.

    Best Regards,
    Martin

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

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

You must be logged in to reply to this topic.