jQuery UI Widgets Forums Grid Uncaught ReferenceError: jqxBaseFramework is not defined

This topic contains 2 replies, has 2 voices, and was last updated by  ashutosh27 8 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • ashutosh27

    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”>
    <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.
    width: 850,
    source: source,
    filterable: true,
    sortable: true,
    ready: function () {
    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) {
    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 () {
    // 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 });
    <body class=’default’>
    <div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
    <div id=”jqxgrid”>
    <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 style=”float: left;”>
    Event Log:
    <div style=”border: none;” id=”events”>


    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,

    jQWidgets team


    Thanks a lot.
    I made the changes and its working fine 🙂

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

You must be logged in to reply to this topic.