jqxObservableArray error
Demonstrates 'X is not a function' error when using observable arrays.
HTML
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.6.0/lodash.min.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxgrid'></div>
<p></p>
<div><button id="clickme">Populate Array</button><div>
JavaScript
//
// Simplified version. Having any object or array type in the data,
// regardless if it's actually displayed or not, causes the problem.
//
var players = [
{ sh_fn: 'Steve', sh_ln: 'Martin', sh_div: ['B1'] },
{ sh_fn: 'Carmen', sh_ln: 'San Diego', sh_div: ['B1'] },
{ sh_fn: 'Bill', sh_ln: 'Murray', sh_div: ['B3'] },
{ sh_fn: 'Peter', sh_ln: 'Falk', sh_div: ['B3'] },
{ sh_fn: 'Angelica', sh_ln: 'Houston', sh_div: ['B5'] },
{ sh_fn: 'Christina', sh_ln: 'Ricci', sh_div: ['B5'] }
];
var oaStorage = [];
var observableArray = new $.jqx.observableArray (oaStorage, function (changed) {
console.log (changed.type);
});
var playerSource = {
localdata: observableArray,
datatype: 'observablearray',
datafields: [{
name: 'sh_fn',
type: 'string'
}, {
name: 'sh_ln',
type: 'string'
}],
updaterow: function (rowid, newdata, commit) {
commit (true);
}
};
_.each (players, function (player) {
observableArray.push (player);
});
var playerAdapter = new $.jqx.dataAdapter(playerSource);
$('#jqxgrid').jqxGrid({
width: '200px',
source: playerAdapter,
autoheight: true,
altrows: true,
editable: true,
filterable: false,
columns: [{
text: 'First Name',
width: 100,
datafield: 'sh_fn'
}, {
text: 'Last Name',
width: 100,
datafield: 'sh_ln'
}]
});
//
// Behavior correct? Commenting out the unobserve(), observe() and
// jqxGrid call causes only the names to be populated in the grid.
// The divisions aren't being updated unless the jqxGrid source is
// reset.
//
$('#clickme').jqxButton ({width: 120});
$('#clickme').on ('click', function () {
observableArray.unobserve ();
//observableArray.length = 0;
//_.each (players, function (player) {
// observableArray.push (player);
//});
observableArray.observe ();
//$('#jqxgrid').jqxGrid ({source:...