Create react app – jqx.dataAdapter

[mike_a4Participant]

I am using “create react app” and following the instructions from: http://www.jqwidgets.com/using-jqwidgets-react-components-with-create-react-app/ .

In the following code I get the message in webstrom during compilation: Line 56: ‘$’ is not defined
If I import jquery I get undefined in $.jqx.dataAdapter(source). In browser debug (F12) although $.jqx is a valid object (not undefined)

Any ideas?

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import TextField from 'material-ui/TextField';
import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui';
import axios from 'axios';
import JqxGrid from '../jqwidgets-react/react_jqxgrid'
//import $ from 'jquery';

let approvals = [];

class Approvals extends Component
{
    constructor(props){
        super(props);
        this.state={
            approvals,
            loading: true
        }
    }

    componentDidMount() {
        const AuthStr = 'Bearer blahblah';
        const url = 'http://REPLACE-WITH-URL';
        var config = {
            headers: {
                'Authorization': AuthStr
            }
        };
        axios.get(url, config)
            .then( (response) => {
                return response.data })
            .then( (json) => {
                this.setState({approvals: json, loading: false});
            });
    }

    render() {
        if (this.state.loading === false)
        {
            let data = this.state.approvals;
            let source =
            {
                localdata: data,
                datatype: "json",
                datafields:
                    [
                        { name: 'trafficSourceEmail', type: 'string' },
                        { name: 'name', type: 'string' },
                        { name: 'payout', type: 'number' },
                        { name: 'dailyConversionCap', type: 'number' },
                        { name: 'status', type: 'number' }
                    ]
            };

            let dataAdapter = new $.jqx.dataAdapter(source);

            let columns =
                [
                    { text: 'User', columntype: 'textbox', datafield: 'trafficSourceEmail', width: 120 },
                    { text: 'Name', datafield: 'name', columntype: 'textbox', width: 120 },
                    { text: 'Payout', columntype: 'textbox', datafield: 'payout', width: 120 },
                    { text: 'Conversion Cap', columntype: 'textbox', datafield: 'dailyConversionCap', width: 120 },
                    { text: 'Status', datafield: 'status', columntype: 'checkbox', width: 67 },
                ];

            return (
                <div>
                    <MuiThemeProvider>
                        <JqxGrid ref='Grid'
                                 width={850} source={dataAdapter} editable={true} columns={columns}
                                 enabletooltips={true} selectionmode={'multiplecellsadvanced'}
                        />
                    </MuiThemeProvider>
                </div>
            )

        }
        else
            return (
                <div>
                    Loading...
                </div>
            )
    }
}

export default Approvals;

[Ivo ZhulevParticipant]

Hi mike_a4,

Are you sure you are using the latest version of jQWidgets?

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[mike_a4Participant]

I downloaded yesterday the: jqwidgets-ver4.5.3

[mike_a4Participant]

The following line that exists in your sample code
let dataAdapter = new $.jqx.dataAdapter(source);

requires jQuery, right?

I’ve installed jQuery 3.2.1 but I am receiving undefined error.

[AsterionDBParticipant]

The obscure tidbit of information that you need is buried in the readme.md created by create-react-app.

Don’t feel bad. I wasted a day finding this info.

## Using Global Variables

When you include a script in the HTML file that defines global variables and try to use one of these variables in the code, the linter will complain because it cannot see the definition of the variable.

You can avoid this by reading the global variable explicitly from the window object, for example:

`js
const $ = window.$;
`

This makes it obvious you are using a global variable intentionally rather than because of a typo.

Alternatively, you can force the linter to ignore any line by adding // eslint-disable-line after it.

[mike_a4Participant]

Asterion,

as your nick comes from Greek mythology and the Greek word Asteri which is star, I confirm that you are a star.

Thanx for your help!

Mike

[Author]

Posts