After upgrade: Uncaught TypeError: Cannot read property 'options' of undefined

[2plus2]

Howdy...

I'm trying up update a client using EasyUI for JQuery and most of the grids work fine, except for a couple. I'm getting errors like the following:

Code:

Uncaught TypeError: Cannot read property 'options' of undefined
    at Object.options (jquery.easyui.min.js?v=1:11929)
    at n.fn.init.$.fn.datagrid (jquery.easyui.min.js?v=1:11792)
    at HTMLTableElement.<anonymous> (jquery.easyui.min.js?v=1:11953)
    at Function.each (jquery-1.12.4.min.js:2)
    at n.fn.init.each (jquery-1.12.4.min.js:2)
    at Object.load (jquery.easyui.min.js?v=1:11952)
    at n.fn.init.$.fn.datagrid (jquery.easyui.min.js?v=1:11792)
    at HTMLInputElement.onSelect (?tID=4:129)
    at _b36 (jquery.easyui.min.js?v=1:15011)
    at _b44 (jquery.easyui.min.js?v=1:15051)

I think I've traced this to the dataGrid, 

Code:

    $.fn.datagrid.methods = {
        options: function(jq) {
            var _8ad = $.data(jq[0], "datagrid").options;

But I can't find anything wrong with how the options are setup.

I've moved them to the js reference (starts with toolbar):

Code:

        $('#dg').datagrid({
            url: '/controls/foo.aspx?a=getFullList',
            onBeforeLoad: function (param) {
                param.f = $('#dgFilter1').combobox('getValue');
                param.s = encodeURI($('#dgSearch').searchbox('getValue'));
                param.first = firstLoad;

                firstLoad = false;
            },
            toolbar: '#toolbar',
            pagination: true,
            rownumbers: false,
            singleSelect: true,
            striped: true,
            remoteSort: true,
            sortName: 'FullName'
        });

I've changed them from inline (original way) within the table to data-options parameter:

Code:

<table id="dg" title="Blah Blah Blah" style="height:300px" width="720px"
        toolbar="#toolbar"  pagination="true"
        rownumbers="false" singleSelect="true" striped="true" remoteSort="true" sortName="FullName">  

or

Code:

<table id="dg" title="Blah Blah Blah" style="height:300px" width="720px"
       data-options=" toolbar: '#toolbar',pagination: true,rownumbers: false,singleSelect: true,
            striped: true,remoteSort: true,sortName: 'FullName'">

Nothing seems to work.

All ideas welcome.

P.S We had references to edatagrid (which I updated to latest version also) and a custom extension to EasyUI, I removed those just for this page and they don't appear to be the problem.

[jarry]

Before loading data from server, please make sure if the '#dgFilter1' combobox component exists. If the combobox is not created, calling any methods will cause errors.

Code:

onBeforeLoad: function (param) {
    param.f = $('#dgFilter1').combobox('getValue');
    param.s = encodeURI($('#dgSearch').searchbox('getValue'));
    param.first = firstLoad;

    firstLoad = false;
},

[2plus2]

It's definitely before the datagrid in the JS flow (and it works fine with older versions of jQuery and jEasyUI). Is there an out of order issue using the latest version of jQuery v1.12.x?

[jarry]

What version are you using? Please show a live example to demonstrate your issue.

[2plus2]

I can't show working code because it's on an Intranet.  If I can replicate via fiddle I'll let you know. We have attempted to upgrade to latest jEasy UI from 1.3.x.

I'll also try some order of execution steps, but we are also seeing issues with opening edit dialog boxes (new data entry dialog boxes work fine) and with input box icons being on left instead of right.

Again, this is from a site that worked for 5 years, no changes before an update of jEasy and jQuery.

[2plus2]

Ok - I found the primary error, the combo box box is firing the onSelect event when the combo box data is loaded (it contains a selected=true in the data). Since the data grid has not been built yet, that was causing the option error. This is different behavior from 1.3.4 combo box. (Very annoying.) I've routed around that using an existing variable that was helping the data grid load the data on the first page load.

Secondary error, when the combo box onSelect event is fired, it calls the datagrid load event. When the load event is called by the comb box the onBeforeLoad event is *not* firing. However the search box searcher event with the exact same call to the data grid load works perfectly. (So do the pagination events.)

What's changed with the combo box that it's not communicating with the data grid correctly?

Code:

var firstLoad = true;

...

       $('#dgFilter1').combobox({
            panelHeight: 'auto',
            editable: false,
            selectOnNavigation: false,
            valueField: 'id',
            textField: 'text',
            data: [{ text: 'Active (All)', id: '*', selected: true }, { text: 'Active (Yes)', id: 'Yes' }, { text: 'Active (No)', id: 'No'}],
            filter: function (q, row) {
                return row.text.toLowerCase().indexOf(q.toLowerCase()) == 0;
            },
            onSelect: function (combo) {
                if (!firstLoad) {
                    $('#dg').datagrid('load');
                }
            }
        });

        $('#dgSearch').searchbox({
            searcher: function (searchText) {
                $('#dg').datagrid('load');
            },
            prompt: 'Name'
        });

        $('#dg').datagrid({
            url: '/controls/somethingsomething.aspx?a=getFullList',
            onBeforeLoad: function (param) {
                param.f = $('#dgFilter1').combobox('getValue');
                param.s = encodeURI($('#dgSearch').searchbox('getValue'));
                param.first = firstLoad;

                firstLoad = false;
            },
            toolbar: '#toolbar',
            pagination: true,
            rownumbers: false,
            singleSelect: true,
            striped: true,
            remoteSort: true,
            sortName: 'FullName'
        });

...

[jarry]

If the datagrid hasn't been created, don't call any methods on it. You also can use the 'onChange' event instead. When a combobox is initialized, the 'onChange' event does not fire while the 'onSelect' event does.

Code:

$('#dgFilter1').combobox({
    //...
    onSelect: function (combo) {
        if ($('#dg').data('datagrid')){
            $('#dg').datagrid('load');
        }
    }
});

[2plus2]

Thanks. I should have known that. Much appreciated.

That also fixed the communication with the data grid. Go figure.

Have a great weekend.