Tips for integrating JavaScript code into React JS applications

I am attempting to create a scrollable table that scrolls both horizontally and vertically, using the example provided by .

In my project directory under src/components/ScrollExample.js, I have copied and pasted the HTML code. In addition, in src/styles/components/_scroll.scss, I have also copied and pasted the CSS code from the example. The resulting table looks exactly like the one in the example.

However, I am currently facing an issue. Although I have fixed the layout, I am unable to get the JavaScript functionality working.

I attempted to include the following code in public/index.html, but I encountered an error stating "Uncaught ReferenceError: $ is not defined":

$(document).ready(function () {
  $('#dtHorizontalVerticalExample').DataTable({
    "scrollX": true,
    "scrollY": 200,
  });
  $('.dataTables_length').addClass('bs-select');
});

How can I resolve this error? I would greatly appreciate any help or suggestions you may have. Thank you.

Answer №1

It appears that JQuery is missing from your html document.

To incorporate JQuery into your html, you can insert it within the Head section:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Answer №2

One issue in your code is the reliance on jQuery instead of vanilla javascript. jQuery is a powerful library derived from javascript. To learn more about it, visit: Jquery - Download or check out this resource: W3schools - jQuery Get Started I suggest utilizing a CDN for better performance.

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to search for and isolate an array object within an array of objects using Javascript?

I am attempting to narrow down the list based on offerings const questions = [ { "id": 2616, "offerings": [{"code": "AA"},{"code": "AB"}]}, { "id": 1505, "offerings": [ ...

After loading the ajax content, remember to include the JavaScript files

Here's the situation: I am importing some php files, one of which includes a slider that requires .js files. However, when I make an ajax call, the file is imported but the js files are not. Is this normal behavior? I attempted the following: var s ...

The getimagesize functionality seems to be malfunctioning

I have developed a function that resizes images to fit as a background image for a div. I provide the function with the div size and the image path. It works perfectly when the height is larger than the width, but it fails when the width is larger than the ...

Trigger a function in jQuery when the DOM undergoes changes

Up until now, I have been utilizing livequery which has served its purpose. However, it tends to slow down the page browsing experience, so I am in search of an alternative solution. I have a function that performs ajax on elements with a specific class l ...

Create a chronological timeline based on data from a JSON object

Here is a JSON object generated by the backend: { "step1": { "approved": true, "approvalTime": "10-11-2021", "title": "title 1", "description": "description 1" ...

Minimize the size of the MUI date selector widget

I've been incorporating the MUI date picker into a data list, but I'm looking to decrease the height of the input field and adjust the positioning of the close date and calendar icons. They're currently taking up too much space between them ...

Steps to display the datatable footer on the printed page

I am having trouble understanding the solutions provided for my table query. The current table setup is as follows: <table class="table table-bordered make_datatable"> <thead> <tr> <th>SL No</th> ...

Enhancing React MaterialUI Theming: Boosting Transition Duration for Theme Switching

I'm currently working on a light/dark theme using React MaterialUi. Curious about: Is there a way to make the theme transition smoother instead of an abrupt change? The Issue: I attempted using inline styling with style={{transition: "all 1s ...

Weather-js efficiently retrieves particular information from the displayed content

I'm currently utilizing weather-js to retrieve weather information based on a user's location determined by their IP address. My main question revolves around streamlining the output data in the console. Unfortunately, this API lacks documentatio ...

Exporting data acquired from a MongoDB query using Node.js

I am currently working on exporting the contents of a MongoDB collection by using exports.getAllQuestions = async function (){ MongoClient.connect(url, function(err, db) { if (err) throw err; var dbo = db.db("Time4Trivia"); ...

Encountering problems with createMediaElementSource in TypeScript/React when using the Web Audio API

Currently, I am following a Web Audio API tutorial from MDN, but with a twist - I am using TypeScript and React instead of vanilla JavaScript. In my React project created with create-react-app, I am utilizing the useRef hook to reference the audio element ...

performing an AJAX call utilizing both a file and post data

I'm reaching out for help because I'm having trouble sending an ajax request with a data file and two posts included Here is the code snippet: $('#image--1').change(function (e) { e.preventDefault(); var img = new FormData(); ...

Utilize a for loop in Vue.js to save a fresh array of objects in a structured format

Trying to achieve the following using Vue: I have two JSON objects that provide information on languages and the number of inputs per language. Using nested loops, I display all the inputs. My goal is to create an object for each input with additional det ...

The MUI icon is visible in the developer tools but fails to display on the screen

Recently, I've been troubleshooting MUI icons in React and encountered an issue where my icons weren't displaying properly even after npm installing @mui/icons-material and importing them using the code snippet below: import HomeIcon from "@mui/i ...

Show a different image with a matching title each time the page loads

I need help creating a JavaScript script that will display a random image from an array along with an associated title each time the page loads. Is there a way to do this without using an onload function placed in the body tag? Currently, my code relies o ...

Sending a message in the DELETE route using express.js

I'm having trouble displaying a message after deleting a user. I attempted to use req.session properties and then retrieve them in the GET route, but they seem to not be available. Can anyone suggest a solution for fixing this code? router.get("/", ...

Column-oriented and Slim-fit packaging

I have been working on designing a layout with a fixed height that will display multiple columns of specified size to accommodate flowing text. While I have successfully implemented this, I am facing an issue where the enclosing div does not adjust its siz ...

Clearing a textarea in jQuery that is populated with text

Having an interesting dilemma. I'm trying to clear a <textarea> and then replace it with new content. The functions in the JSFiddle will work perfectly fine if the textarea is left empty, but as soon as any text is manually typed into it, the me ...

Is Sending an Object to a Function in the Same Scope Inefficient?

Is there a noticeable delay when passing around an object within the same scope? Let's explore Option 1 and Option 2. In Option 1, we work directly with the object, while in Option 2 we follow better encapsulation practices. However, if we were to sti ...

What causes Angular to redirect to the route but display the incorrect view?

There is a fundamental issue I have encountered while working with routes: I have multiple routes defined If the user is not authenticated, they are redirected to the login page The problem lies in the fact that, on the initial display of the web app, t ...