JavaScript Error After Updating to 2.9.0

[alexxMember]

Hi
I am currently getting the following javascript error after recently updated to the jqwidgets 2.9.0 and I am now including jquery-2.0.2.min.js instead of jquery-1.9.1.min.js:

SCRIPT438: Object doesn’t support property or method ‘addEventListener’
jquery-2.0.2.min.js, line 4 character 6105

The error does not occur when I use jquery-1.9.1.min.js.

Any recommendations?

[Peter StoevKeymaster]

Hi,

jQuery 2.x does not support old IE versions. I suggest you to look at: http://www.jqwidgets.com/jquery-widgets-documentation/ for more information about which version of jQuery to use. You can also learn more about the jQuery versions here: http://jquery.com/download/

Best Regards,
Peter Stoev

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

[alexxMember]

Peter,
Thanks for the info.

Alexx

[aoverton07Participant]

I am also experiencing MANY errors when trying to upgrade from 2.83 to 2.9.

My site uses MANY jqwidgets (~20 different windows, ~15 different grids, tree, buttons, menus….etc) but for some reason i get this error for just TWO of my very simple popup windows.

“Error: Invalid jQuery Selector – calendarEventAdd! Please,
check whether the used ID or CSS Class name is correct.”

where ‘calendarEventAdd’ is the id of my window. The window is a simple popup with two inputs, the syntax is correct, and I have many other windows with the same structure that work fine!

Ive searched google for this error with NO luck, Ive tried changing the name of the ID and that didnt work either.

What could be causing this? anyone else getting strange errors when upgrading to 2.9????

[Peter StoevKeymaster]

Hi,

That exception is raised by jqxCore when you try to set a property or invoke a method of Empty jQuery selection i.e when the selection by ID or CSS is Invalid.

Best Regards,
Peter Stoev

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

[aoverton07Participant]

That all makes sense however it seems to be throwing these exceptions in the wrong places or due to some other reason…..below is part of my code:

$("#addListCancel").jqxButton({ theme: theme, height: 25, width: 60 });
			$("#editCancel").jqxButton({ theme: theme, height: 25, width: 60 });
			$("#deleteCancel").jqxButton({ theme: theme, height: 25, width: 60 });
			
		alert('before problem area');
		
			$("#addListPopup").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#addListCancel"), modalOpacity: 0.01});
			alert('1');
			$("#editListPopup").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#editCancel"), modalOpacity: 0.01});
			alert('2');
			$("#deleteListPopup").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#deleteCancel"), modalOpacity: 0.01});
			
		alert('after problem area');

I three errors here, one after each window declaration. The windows html already exists and has no syntax errors.

The error message that pops up after each of these windows references a totally different selector too, I dont know where its getting the ID from….

[Peter StoevKeymaster]

Hi,

1. We will not be able to help you using the information from the provided code. If you want from us to test and debug your code, then please provide a sample which demonstrates it.

2. The ID in the validation is got from your jQuery selection(jQuery has a property which returns the used Selector) i.e if you try to use $(“#myID”) and $(“#myID”).length == 0, then the exception will be thrown and it will display error message which points that myID is not a correct ID.

Best Regards,
Peter Stoev

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

[alexxMember]

Hi Peter
I have done what you suggest and I am no longer getting that javascript error, however, currently all the data is being render in the first column. This issue does not exist in the previous versions.
I came up with the following sample to demonstrate this issue. For testing just comment/uncomment references to the appropriate packages.

Any clue why this might be happening?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<!-- 						********		JQWidgets 2.8.3		********				 -->
<!--     <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />        -->
<!--     <script type="text/javascript" src="jquery/jquery-1.8.1.min.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>  -->
<!--     <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>  -->
<!--     <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>  -->
<!--     <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>  -->
<!--     <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>  -->
<!--     <script type="text/javascript" src="jqwidgets/jqxgrid.grouping.js"></script> -->
<!-- 						********		JQWidgets 2.9.0		********				 -->    
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxcheckbox.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxcore.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxdata.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxbuttons.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxscrollbar.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxmenu.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxlistbox.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxdropdownlist.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxgrid.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxgrid.selection.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxgrid.columnsresize.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxgrid.filter.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxgrid.sort.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxgrid.pager.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxgrid.grouping.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {        
           
            var data = [{
                "id": 85110368,
                "vendorAcctID": 10000093,
                "vendorID": 8,
                "vendorName": "American Stock Exchange (AMEX)",
                "vendorAcctNum": "AcctTest",
                "invoiceDate": 1331010000000,
                "invoiceNum": "9999999",
                "currentAmt": 1500.0000,
                "currentTax": 100.0000,
                "pastDueAmt": null,                
                "appvDate": null,                
                "created": 1331045184350,
                "createdBy": "admin",
                "modified": 1341310013153,
                "modifiedBy": "mikeDModifier",                
                "invoiceAmt": 1600.0000,
                "paidAmt": 1600.0000,
                "total": 1600.0
            }];
           
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'vendorName' },                    
                    { name: 'vendorAcctNum' },
                    { name: 'invoiceNum' },
                    { name: 'invoiceDate' }
                ],
                id: 'id',
                localdata: data
            };
            
            var dataAdapter = new $.jqx.dataAdapter(source);
            
            $("#jqxgrid").jqxGrid(
            {
            	width: 900,
             	columnsheight:20,
                source: dataAdapter,
                columnsresize: true,
                showemptyrow: false,
                pagesize: 25,
                pageable: true,
                sortable: true,
                columns: [
                  { text: 'Vendor', datafield: 'vendorName', width: 240},
                  { text: 'Vendor Acct Num', datafield: 'vendorAcctNum', width: 150},
                  { text: 'Invoice Num', datafield: 'invoiceNum', width: 170},
                  { text: 'Invoice Date', datafield: 'invoiceDate', width: 150}                  
              ]
            });
        });
    </script>
</head>
<body>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

[Peter StoevKeymaster]

Hi,

Did you update the CSS files, too? From your code I think that you do not use the latest CSS files, i.e

<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />

should be probably changed to

<link rel="stylesheet" href="jqwidgets_ver2.9.0/styles/jqx.base.css"

type=”text/css” />

Best Regards,
Peter Stoev

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

[alexxMember]

Hi Peter,

Thanks, that worked.

Alexx

[Author]

Posts