jTable:Uncaught TypeError: Cannot call method 'removeClass' of undefined

StackOverflow https://stackoverflow.com/questions/20677030

  •  19-09-2022
  •  | 
  •  

Question

I'm trying to use jTable (for the first time) from JSP. I'm using Java servlets in order to populate and edit the data.

I don't succeed to make the table load the data, or even reach the Java servlet that should query the data. The error I'm getting is: "jTable:Uncaught TypeError: Cannot call method 'removeClass' of undefined". If I remove the table definition - the error disappears and all the logs messages are printed, so the problem has to do with the table definition I guess.

Do you know what this error means? If needed,I'll paste also the Java code, but I'm not sure this is the issue.

By the way, the Java object that is mapped to the table, contains more columns than displayed in this table. Do I have to map all the fields?

<html>
<head>
<link rel="stylesheet" href="css/jquery-ui-1.9.2.css" />
<link rel="stylesheet" href="css/timePicker.css" />
<link href="js/jtable.2.3.1/themes/lightcolor/orange/jtable.min.css"
    rel="stylesheet" type="text/css" />

<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="js/jquery-ui-1.9.2.js"></script>
<script src="js/jquery.timePicker.min.js"></script>
<script src="js/jquery.timePicker.js"></script>
<script src="js/jtable.2.3.1/jquery.jtable.min.js"  type="text/javascript"></script>


<script type="text/javascript">     

    $(document).ready(function() {
        console.log( "In doc. ready!" );

        $('#LastRequestsTableContainer').jtable({
            title : 'Saved Dates',
            actions : {
                listAction : '/listUserSavedDates.rpc',
                createAction : '/saveUserDate.rpc',
                updateAction : '/saveUserDate.rpc',//I'll changes it later
                deleteAction : '/saveUserDate.rpc'//I'll changes it later
            },
            fields : {
                ownerName : {
                    title : 'Name',
                    width : '40%'
                },
                ownerBirthDate : {
                    title : 'Birth date',
                    width : '40%',
                    type : 'date'
                },
                ownerBirthHour : {
                    title : 'Birth time',
                    width : '30%',
                }
            }
        });

        console.log( "Before LastRequestsTableContainer.load" );
        $('#LastRequestsTableContainer').jtable('load');
        console.log( "After LastRequestsTableContainer.load" );

        console.log( "out of doc. ready!" );
    });


</script>
</head>

<body dir="rtl"
    style="font-family: sans-serif; font-size: 10pt; text-align: right; font-color: black;">

    <div id="formDiv" style="width: 100%; overflow: hidden;">
        <div id="LastRequestsTableContainer" style="width: 30%; float: left;">
        </div>

        <!-- some more divs that works fine-->
    </div>
</body>
</html>

I appreciate your help.

Thanks Carmel

Était-ce utile?

La solution

The problem was the two jquery-ui versions (probably historical reasons…).

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top