Jquery 3.3.1 and jqxform not an element? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

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

Author

Jquery 3.3.1 and jqxform not an element? Posts

October 23, 2018 at 12:14 pm Jquery 3.3.1 and jqxform not an element? #102486

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>

October 23, 2018 at 8:58 pm Jquery 3.3.1 and jqxform not an element? #102490

Chaza96

Participant

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

October 24, 2018 at 11:23 am 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/

Author

Posts

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

You must be logged in to reply to this topic.