The only way I can find (online) to import ajax is via the HTML script tag <script ... </script>, but my webapp is built without an HTML file. It's a weird situation because I have made one (with kind of important stuff like favicon reference and website name) but however my app is set up, it doesn't seem to care about the index.html.
It's built with Koa, Next, React, and Material-UI. I am by no means a professional but I modeled this app after a previous app built with Koa, Next, and React that did have a functioning index.html but the app is working without it and I still can't figure out for the life of me when/where my code is supposed to ask for it. Best case scenario is that I don't need the index.html to make AJAX work, but if anyone knows what I'm missing when it comes to getting the index.html to work, I'm all ears.
This is what my repository looks like at the moment:
[-components
[---Component1
[---Component2
[---Component3
[---Component...
[-node_modules
[-pages
[---index.js
[-public
[---favicon.png
[---index.html
[-app.js
[-package.json
The code in question is @ index.js
class Index extends React.Component {
state = {
loading: false,
};
componentDidMount() {
var jqXHR = $.ajax({
type: "POST",
url: "/login",
async: false,
data: { mydata: [Cookies.get('links'), Cookies.get('numSentences')] }
});
Cookies.set('final', jqXHR.responseText);
}
handleClickLoading = () => {
this.setState(state => ({
loading: true,
}));
this.componentDidMount();
};
render() {
const {loading} = this.state;
return (
<div>
<AppBar/>
<Block/>
<Card>
<CardActions>
<Button size="large"
fullWidth={true}
onClick={this.handleClickLoading}>Submit</Button>
</CardActions>
</Card>
<Fade
in={loading}
unmountOnExit
>
<BottomBar/>
</Fade>
</div>
)
}
}
export default Index;
This code will immediately crash upon loading the page with ReferenceError: $ is not defined. This is after I troubleshooted a bit, and initially had the AJAX code in the handleClickLoading() function like such, which wouldn't crash until the button onClick event was triggered:
...
class Index extends React.Component {
state = {
loading: false,
};
handleClickLoading = () => {
this.setState(state => ({
loading: true,
}));
var jqXHR = $.ajax({
type: "POST",
url: "/login",
async: false,
data: { mydata: [Cookies.get('links'), Cookies.get('numSentences')] }
});
Cookies.set('final', jqXHR.responseText);
};
render() {
...
For reference, I can type "$.ajax" and Pycharm will autocomplete and tell me the expected parameters, but it always ends up being underlined and flagged as "missing import statement". How do I import it?
