jQuery UI Widgets › Forums › Grid › Uncaught ReferenceError: jqxBaseFramework is not defined
Tagged: jQuery, jqwidgets, jqxBaseFramework, jqxBaseFramework is not defined, jqxcore.js, jqxFilter, script, Widget
This topic contains 2 replies, has 2 voices, and was last updated by ashutosh27 9 years, 7 months ago.
-
Author
-
I’m facing this error in the following code even after having version 3.6.0 of jqwidgets. Any help would be appreciated. Thanks in advance.
<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”jqwidgets1/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets1/styles/jqx.classic.css” type=”text/css” />
<script type=”text/javascript” src=”jqwidgets1/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxpanel.js”></script>
<script type=”text/javascript” src=”jqwidgets1/globalization/globalize.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxcalendar.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets1/scripts/demos.js”></script>
<script type=”text/javascript” src=”jqwidgets1/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxdata.export.js”></script>
<script type=”text/javascript” src=”jqwidgets1/jqxgrid.export.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘CompanyName’},
{ name: ‘ContactName’},
{ name: ‘ContactTitle’},
{ name: ‘Address’},
{ name: ‘City’},
],
url: ‘data.php’
};
var addfilter = function () {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = ‘Beate’;
var filtercondition = ‘contains’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtervalue = ‘Andrew’;
filtercondition = ‘starts_with’;
var filter2 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
filtergroup.addfilter(filter_or_operator, filter2);
// add the filters.
$(“#jqxgrid”).jqxGrid(‘addfilter’, ‘firstname’, filtergroup);
// apply the filters.
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
}
$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: source,
filterable: true,
sortable: true,
ready: function () {
addfilter();
},
autoshowfiltericon: true,
columns: [
{ text: ‘Company Name’, datafield: ‘CompanyName’, width: 150},
{ text: ‘ContactName’, datafield: ‘ContactName’, width: 250 },
{ text: ‘Contact Title’, datafield: ‘ContactTitle’, width: 150 },
{ text: ‘Address’, datafield: ‘Address’, width: 150 },
{ text: ‘City’, datafield: ‘City’, width: 150 }
]
});
$(‘#events’).jqxPanel({ width: 300, height: 80});
$(“#jqxgrid”).on(“filter”, function (event) {
$(“#events”).jqxPanel(‘clearcontent’);
var filterinfo = $(“#jqxgrid”).jqxGrid(‘getfilterinformation’);
var eventData = “Triggered ‘filter’ event”;
for (i = 0; i < filterinfo.length; i++) {
var eventData = “Filter Column: ” + filterinfo[i].filtercolumntext;
$(‘#events’).jqxPanel(‘prepend’, ‘<div style=”margin-top: 5px;”>’ + eventData + ‘</div>’);
}
});
$(‘#clearfilteringbutton’).jqxButton({ height: 25});
$(‘#filterbackground’).jqxCheckBox({ checked: true, height: 25});
$(‘#filtericons’).jqxCheckBox({ checked: false, height: 25});
// clear the filtering.
$(‘#clearfilteringbutton’).click(function () {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
});
// show/hide filter background
$(‘#filterbackground’).on(‘change’, function (event) {
$(“#jqxgrid”).jqxGrid({ showfiltercolumnbackground: event.args.checked });
});
// show/hide filter icons
$(‘#filtericons’).on(‘change’, function (event) {
$(“#jqxgrid”).jqxGrid({ autoshowfiltericon: !event.args.checked });
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”>
</div>
<div id=”events” style=”margin-top: 30px;”>
<div style=”width: 200px; float: left; margin-right: 10px;”>
<input value=”Remove Filter” id=”clearfilteringbutton” type=”button” />
<div style=”margin-top: 10px;” id=’filterbackground’>Filter Background</div>
<div style=”margin-top: 10px;” id=’filtericons’>Show All Filter Icons</div>
</div>
<div style=”float: left;”>
Event Log:
<div style=”border: none;” id=”events”>
</div>
</div>
</div>
</div>
</body>
</html>Hello ashutosh27,
Please make sure you have updated all jQWidgets scripts to 3.6.0, not only some of them. It is also recommended that the jQuery script is referenced before the jQWidgets scripts and that jqxcore.js is referenced before separate widget files.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks a lot.
I made the changes and its working fine 🙂 -
AuthorPosts
You must be logged in to reply to this topic.