b.jqx.dataAdapter is not a constructor

[tomexsansMember]

Hello i followed your tutorials on this link tutorials But there was an error it keeps on loading and loading. And not giving any datas. I checked on the FF console ot says


b.jqx.dataAdapter is not a constructor
defineInstance(d=Object { datatype="json", datafields=[8], id="EmployeeID", more...}, l=undefined)jqxgrid.js (line 6)
defineInstance(e=Object { datatype="json", datafields=[8], id="EmployeeID", more...})jqxgrid.js (line 6)
defineInstance(d=[Object { width=700, height=350, source={...}, more...}])jqxgrid.js (line 6)
define()jqxcore.js (line 6)
f(a=[div#jqxgrid.jqx-grid], c=function(), d=undefined)jquery....min.js (line 3)
f(a=function(), b=undefined)jquery....min.js (line 3)
define()jqxcore.js (line 6)
(?)()/jqxwidgets/ (line 111)
f(b=Document /jqxwidgets/, f=[function()])jquery....min.js (line 3)
f(b=Document /jqxwidgets/, c=[function()])jquery....min.js (line 3)
f(a=undefined)jquery....min.js (line 3)
f()jquery....min.js (line 3)
[Break On This Error]

...s("display","none")}}},_rendervisualrows:function(){var K=this.vScrollInstance;v...

how could i fix this. thanks by the way

[Peter StoevKeymaster]

Hi tomexsans,

In the latest release of jQWidgets, we separated the data binding logic from the jqxGrid and created the jqxDataAdapter plugin, This plugin is currently used by the jqxGrid and the jqxChart widgets. The post is most probably created with an old version of the jqxGrid which does not require referencing the jqxdata.js. As I assume from your post, you need to reference the jqxdata.js javascript file. I suggest you also to take a look at this post: jquery-grid-getting-started.htm.

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team

[tomexsansMember]

Hello, Thank you for your reply
I added the reference to the script as stated and i followed it and converted to PHP to JSON their where no errors, but i notice this in the Firebug , it keeps Highlighting this part of the jqxgrid.js

(function(b){b.jqx.jqxWidget("jqxGrid","",{});b.extend(b.jqx._jqxGrid.prototype,{defineInstance:function(){this

Thank you in advance.

[tomexsansMember]

To add more at the console it says

a.jqx is undefined

[tomexsansMember]

Here is my code ,
Maybe it you could point out what am i doing wrong
CODE

[Peter StoevKeymaster]

Hi tomexsans,

The reported error will occur, if the required javascript files are not correctly referenced. I also noticed that your php file is data.php but the url that you set is data.txt i.e the url is not correct.

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team

[tomexsansMember]

Ok sir, thank you for your time. I’ll try to correct the references. Thank you

[Peter StoevKeymaster]

Hi tomexsans,

I will do my best to post here a link to an archive with the actual tutorial’s implementation. Hope that it will help.

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team

[tomexsansMember]

Hello Peter,

I Got it working, i dont know what i did but its working now.


//my table

`EmployeeID` int(11) NOT NULL AUTO_INCREMENT,
`LastName` varchar(20) NOT NULL,
`FirstName` varchar(10) NOT NULL,
`Title` varchar(30) DEFAULT NULL,
`TitleOfCourtesy` varchar(25) DEFAULT NULL,
`BirthDate` datetime DEFAULT NULL,
`HireDate` datetime DEFAULT NULL,
`Address` varchar(60) DEFAULT NULL,
`City` varchar(15) DEFAULT NULL,
`Region` varchar(15) DEFAULT NULL,
`PostalCode` varchar(10) DEFAULT NULL,
`Country` varchar(15) DEFAULT NULL,
`HomePhone` varchar(24) DEFAULT NULL,
`Extension` varchar(4) DEFAULT NULL,
`Photo` longblob,
`Notes` longtext,
`ReportsTo` int(11) DEFAULT NULL,
`PhotoPath` varchar(255) DEFAULT NULL,
PRIMARY KEY (`EmployeeID`),
KEY `LastName` (`LastName`),
KEY `PostalCode` (`PostalCode`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

// data.php

$row['EmployeeID'],
'FirstName' => $row['FirstName'],
'LastName' => $row['LastName'],
'Title' => $row['Title'],
'Address' => $row['Address'],
'City' => $row['City'],
'Country' => $row['Country'],
'Notes' => $row['Notes']
);
}

echo json_encode($employees);
}
?>
// index.php

$(document).ready(function () {
// prepare the data
var theme = 'classic';

var source =
{
datatype: "json",
datafields: [
{ name: 'EmployeeID'},
{ name: 'FirstName'},
{ name: 'LastName'},
{ name: 'Title'},
{ name: 'Address'},
{ name: 'City'},
{ name: 'Country'},
{ name: 'Notes'}
],
url: 'data.php',
root: 'Rows',
addrow: function (rowid, rowdata) {
// synchronize with the server - send insert command
var data = "insert=true&" + $.param(rowdata);
$.ajax({
dataType: 'json',
url: 'data.php',
data: data,
success: function (data, status, xhr) {
// insert command is executed.
}
});
},
deleterow: function (rowid) {
// synchronize with the server - send delete command
var data = "delete=true&EmployeeID=" + rowid;
$.ajax({
dataType: 'json',
url: 'data.php',
data: data,
success: function (data, status, xhr) {
// delete command is executed.
}
});
},
updaterow: function (rowid, rowdata) {
// synchronize with the server - send update command
var data = "update=true&" + $.param(rowdata);
$.ajax({
dataType: 'json',
url: 'data.php',
data: data,
success: function (data, status, xhr) {
// update command is executed.
}
});
}

};

var dataadapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 600,
source: dataadapter,
theme: theme,
autoheight: true,
pageable: true,
virtualmode: true,
rendergridrows: function()
{
return dataadapter.records;
},
columns: [
{ text: 'EmployeeID', datafield: 'EmployeeID', width: 100 },
{ text: 'First Name', datafield: 'FirstName', width: 100 },
{ text: 'Last Name', datafield: 'LastName', width: 100 },
{ text: 'Title', datafield: 'Title', width: 180 },
{ text: 'Address', datafield: 'Address', width: 180 },
{ text: 'City', datafield: 'City', width: 100 },
{ text: 'Country', datafield: 'Country', width: 140 },
{ text: 'Notes', datafield: 'Notes', width: 140 }
]
});
$("#addrowbutton").jqxButton({ theme: theme });
$("#deleterowbutton").jqxButton({ theme: theme });
$("#updaterowbutton").jqxButton({ theme: theme });

// update row.
$("#updaterowbutton").bind('click', function () {
var datarow = generaterow();
var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
if (selectedrowindex >= 0 && selectedrowindex = 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
$("#jqxgrid").jqxGrid('deleterow', id);
}
});

});

Here is the working Code Also for everyone who is looking for a sample working code. There is another problem

Uncaught ReferenceError: generaterow is not defined
(anonymous function)/jqxwidgets/:123
f.event.dispatchjquery-1.7.1.min.js:4
f.event.add.h.handle.i

I dont know what to do with this.

[tomexsansMember]

The working COde Thank you again

[yanadiMember]

can i ask something

1. where is generaterow ? because there is an error where you click update or create.
2. There is some error in delete. the id doesn’t return id employee but return id rows.

[Peter StoevKeymaster]

Hi yanadi,

I suggest you to take a look at this help topic: php-server-side-grid-crud.htm. The help topic also contains the required generaterow function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[yanadiMember]

Thanks dude it working like magic

[Author]

Posts