jQWidgets Forums

Tagged: ie9 object null undefined

This topic contains 6 replies, has 2 voices, and was last updated by gplante2 13 years, 2 months ago.

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

Author

ie9 Error: Unable to get value of the property 'rowscount'… Posts

April 13, 2012 at 8:23 pm ie9 Error: Unable to get value of the property 'rowscount'… #3394

gplante2

Member

Hi,

I’m new to jqWidgets and I’m facing the following problem with IE9. On other browsers, everything is working fine.

If I had the following 2 javascript line of code directly into the html page (between script tags of course), it works fine:
var datainformation = $(‘#mygrid’).jqxGrid(‘getdatainformation’);
var rowscount = datainformation.rowscount;

However, if I put these lines in a function then I call this function, I’m getting the following error message on the second line:
Error: Unable to get value of the property ‘rowscount’: object is null or undefined

Do you know why is becomes undefined when called via a function under IE9?

Thank you in advance for any help anybody can provide.

G. Plante

April 14, 2012 at 2:38 am ie9 Error: Unable to get value of the property 'rowscount'… #3397

Peter Stoev

Keymaster

Hi G. Plante,

I am unable to reproduce the reported behavior. Could you send us a sample which illustrates it?

Here’s the code I used for testing:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.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/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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 200; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'First Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ]
            });
            $("#Div1").click(function () {
                var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
                var rowscount = datainformation.rowscount;
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
         <div style="width: 200px; height: 200px; background:blue;" id="Div1"></div>
   </div>
</body>
</html>

As you can see, I get the rowscount when the user clicks the DIV tag.

Looking forward to your reply.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 14, 2012 at 4:47 pm ie9 Error: Unable to get value of the property 'rowscount'… #3404

gplante2

Member

Hi again Peter,

Thank you for your help. After some new tests, I still have the problem but I have more information to tell you now.

The problems occurs only when my jqxGrid is in a jquery ui dialog box. It looks that when I do something like that
$(‘#mygrid’).jqxGrid(…

this is not the mygrid object that is returned but another object instead. I have this behaviour only when the grid is in a jquery dialog box and with IE9.

This is not the first time I put objects on a jquery dialog form and I never had this kind of behaviour. This is very strange…

Here is the problem in brief:

<code>
<div id='mydialog'>
<div id='mygrid'>
</div>
</div>
<script type="text/javascript">
  $( "#mygrid" ).jqxGrid( bla bla bla... I added some row data here ...
  $( "#mydialog" ).dialog(bla bla bla...
</script>
<button onclick="var data = $('#mygrid).jqxGrid('getrowdata', 1); alert(data.description);">Test</button>
</code>

According to the code above, if you click the button, you will receive the error
Error: Unable to get value of the property ‘rowscount’: object is null or undefined

If you comment the line
$( “#mydialog” ).dialog(bla bla bla…
so that the dialog box is not created, if you click the button, everything works fine.

So, again, after some tests, it looks that once the dialog box is created, when I try to access the grid using $(‘#mygrid’).jqxGrid(…, it looks that this is not the correct object that is returned.

Here is also another strange thing.
When I DO NOT create the jquery dialog box, if I do this:
alert($(‘#mygrid’)[0].className);
This is what is displayed:
jqx-grid jqx-grid-classic jqx-reset jqx-reset-classic jqx-rc-all jqx-rc-all-classic jqx-disableselect

However, if I create the jquery dialog box, here is what is displayed instead:
jqx-menu jqx-menu-classic jqx-menu-vertical jqx-menu-vertical-classic jqx-rc-all jqx-rc-all-classic

So, can you help me about this?

Thanks in advance.

G. Plante

April 14, 2012 at 8:36 pm ie9 Error: Unable to get value of the property 'rowscount'… #3407

Peter Stoev

Keymaster

Hi G. Plante,

I noticed that your code is not in a document.ready function. However, it is important to use this function as it is executed when the DOM is fully loaded. Did you try the code from my post?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 15, 2012 at 2:57 pm ie9 Error: Unable to get value of the property 'rowscount'… #3414

gplante2

Member

Hi again Peter,

Thank you again for your help. For your information, I confirm you that even if I put my code in the document.ready function, it does not work either.

So, to help you to help me, to reproduce the problem, I took your exact code above and I just modified it as follow:

1) I added a line to include jquery ui:

<script type="text/javascript" src="../../scripts/jquery-ui.min.js"></script>

2) I put your line

<div id="jqxgrid"></div>

between a div like this:

<div id='mydialog'>
   <div id="jqxgrid"></div>
</div>

3) I added the following line in the document.ready function (at the end):

$( "#mydialog" ).dialog({ height: 600, width: 600, modal: false });

Now, if you run the html page and you click the blue div, you will get the problem I’m talking about. Finally, I’m also having this problem with Firefox 9 and not only IE9.

Please, help.

G. Plante

April 15, 2012 at 3:48 pm ie9 Error: Unable to get value of the property 'rowscount'… #3415

Peter Stoev

Keymaster

I prepared an Online Demo using the code from my post and placing the Grid inside a Dialog. In the demo, click the Blue Div below the Grid to see an alert which displays the rows count.

Here’s the Online Demo link: Grid inside a Dialog
The source code is below:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="styles/jquery.ui.all.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jqx-all.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 200; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#mydialog").dialog({ height: 600, width: 600, modal: false });
            $("#jqxgrid").jqxGrid(
            {
                height: 300,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'First Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ]
            });
            $("#Div1").click(function () {
                var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
                var rowscount = datainformation.rowscount;
                alert("Rows Count: " + rowscount);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='mydialog'>
        <div id="jqxgrid"></div>
         <div style="width: 200px; height: 200px; background:blue;" id="Div1"></div>
   </div>
</body>
</html>

jQWidgets Team
http://www.jqwidgets.com

April 15, 2012 at 6:38 pm ie9 Error: Unable to get value of the property 'rowscount'… #3417

gplante2

Member

Hi again Peter,

I tried your online demo and it worked so I decided to download the last version of jqWidgets just to be sure and it started to work fine. So, it looks that the version I had had an issue about that. What is strange is that I downloaded my version just some weeks ago.

So, everything is working fine now and I’m very glad about that.

I want to thank you for your very good support.

Since everything is working fine now, I just purchased jqWidgets from your web site. You should see a new order into your system.

Best regards,

G. Plante

Author

Posts

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

You must be logged in to reply to this topic.