External vendor scripts such as JavaScript and jQuery are not functioning properly after being rendered in a ReactJS environment

I am currently developing a frontend web app using ReactJS. I obtained a template from W3layout that is built with HTML5, CSS3, and custom JS files, along with various third-party/vendor plugins like nice-select, bootstrap, slik, owl-carousel, etc.

Despite not being a Front End Developer (my expertise lies in serverside scripting & database), I decided to utilize the downloaded template for my ReactJS application development.

However, after the initial rendering of the page, the jQuery/other vendor scripts cease to function when navigating to other routes/components.

I attempted to trigger updates/changes to the plugins within the `componentDidUpdate()` lifecycle method:

componentDidUpdate(){
//  $('select').niceSelect('update');
}

Unfortunately, none of these methods seem to be working as intended.

Here is a snippet from my Index.html:

<!DOCTYPE html>
<html lang="en">
...

My main concern is how we can effectively integrate existing vendor scripts into our ReactJS project without encountering any issues.

javascriptjqueryreactjs

Answer №1

When jQuery binds its listeners to existing DOM elements, new nodes do not automatically receive those listeners when the DOM changes. To ensure proper functionality, you must initialize each jQuery script after any navigation or significant DOM change occurs. Another option is to have the listeners target the document itself:

$('button').click(function(){})

This code should be replaced with:

$(document).on('click', 'button', function(){})

If necessary, you can force React Router to reload the page upon every navigation:

<BrowserRouter forceRefresh/>

However, similar issues may arise with other React components.

Here are some suggestions to address this issue:

  1. Consider replacing jQuery plugins with React modules.

  2. Utilize the history object provided by React Router to track navigation changes and reinitialize jQuery code accordingly.

  3. Use componentDidMount and componentDidUpdate lifecycle methods to bind and update jQuery listeners appropriately.

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

Adjusting the height of content in Angular Material 2 md-tab

I've recently started working with angular material and I'm facing an issue while trying to implement md-tab into my application. The problem is that I can't seem to style my tab content to take up the remaining height of the screen. Could s ...

javascriptcssangularangular-material

How can I pass command line variables into an npm script?

I am facing an issue where I am attempting to pass a command line option (which is not stored in version control) to my main script index.js. This script performs specific actions based on a designated S3 bucket. Here is the relevant section from my packa ...

javascriptnode.jsshellnpmecmascript-6

Every time I use Get for ajax calls, I keep getting hit with a frustrating

Initially, I was making a call to a [web method] using the POST method. However, since I need to receive data back, I attempted to switch to using the GET method instead. The previous implementation using POST was successful. Unfortunately, using GET resu ...

jqueryasp.netajaxgetwebmethod

Tips for locating the index of the previously selected active class

I am currently working on a slider and have made progress up to this point. However, I am facing an issue where I cannot proceed because I need to identify the index of the item from which I removed the last active class before the click event occurs. My ...

javascriptcsssliderclickstyles

Display user input within a modal dialogue box

I have a subscription form that requires users to enter their name and email address. After clicking on "Compete Now," a pop-up appears asking for workshop information and postal code. The form is functioning correctly as intended. However, I want the em ...

javascripthtmlcsstwitter-bootstrap

I encountered an issue with Array map when attempting to access the data during a dynamic rendering process

function UserTransactionsComponent1() { const [accounts, setAccounts] = useState(); useEffect(() => { async function fetchData() { const res = await fetch( 'https://proton.api.atomicassets.io/atomicassets/v1/accounts' ...

javascriptreactjsnext.jsatomicassets

Caution: npm installation warns about potential issues

After encountering some WARN messages, I attempted to update npm by running npm audit fix However, this resulted in even more WARN messages. When I tried to install all dependencies using npm i I was bombarded with a plethora of WARN messages (see below) ...

javascriptnode.jsnpm

What is the process for retrieving the information sent from the client application to the jsreport server?

I want to create a downloadable pdf report through my angular application using jsreport. The client app makes a POST request passing sample data to the report server in this manner. $http.post('http://localhost:5488/api/report', { ' ...

javascriptjqueryangularjspostjsreport

There is an error message in Vue nextTick: "TypeError: this.method is not a function." The error only appears in my console, but the functionality seems to be working correctly in the browser

I'm experiencing an issue where I encounter an error when accessing a certain component for the second time in my browser. The strange thing is that everything appears to be working fine initially, but the error occurs when I try to perform actions li ...

jquerylaravelvue.jsvuejs2vue-router

How can I prevent opening duplicate tabs of the same website simultaneously?

Is there a way to prevent users from accessing the same website page from multiple tabs? Could this be accomplished using JavaScript? ...

javascriptphphtml

toggle to enable dark mode feature in the material ui framework

I have been working on adding a dark mode toggle to my website. Everything seems to be set up correctly, and the toggle appears in the right place. I am using the useState hook to handle the toggle functionality. However, when I click on the toggle, the th ...

reactjsreact-hooksmaterial-ui

Avoiding the need to wait for completion of the jQuery $.get function

Currently, I am executing a basic jQuery GET request as shown below and it is functioning correctly. $.get("http://test.example.com/do-something", function (data) { console.log("test work done"); }); The GET request is initiated without affecting the ...

javascriptjqueryajax

Efficiently loading components in Angular using browserify with lazy loading

As I work on developing the architecture of a complex application with Angular, I have started with the angular-seed project which seems to be a solid starting point. However, one issue that concerns me is how Angular apps tend to load everything upfront b ...

javascriptangularjsbrowserify

Experiencing challenges with ng-repeat and the concept of 'distinct'

I'm facing a perplexing issue. When utilizing ng-repeat to iterate through my data and create checkboxes, I encounter unexpected behavior. The result is multiple duplicate items being displayed instead of unique ones. Here's an example: <lab ...

javascriptangularjscheckboxangularjs-ng-repeatangular-ui

Utilizing a third-party API within the next/api endpoint

I've recently started working with NEXTJS and developed a weather application. I'm integrating the openweather API, but I'm unsure how to use it within the next/api. I attempted creating a file named today.js inside the next/api directory an ...

javascriptreactjsapinext.jsopenweathermap

Discover the specific item within an array of objects

Anyone have information like this: const info = { Title : "Banana", Quantity : 10, Location : "Everywhere", Phone : 123456, A : 987, B : 654, } and there is another array of details as: const dataArr = ["Title",&q ...

javascriptreactjs

Opting for fetch over jQuery's ajax for making successful GET requests to an API

Recently, I found myself in a situation where I needed to convert a function that uses a remote API from returning a callback to returning a Promise. This change presented an opportunity for me to also switch from using $.ajax to fetch, since fetch already ...

javascriptjqueryajaxfetch

What could be causing the issue with AJAX not running in a Python Django deployment on Heroku

My Django application is successfully deployed on Heroku, but I'm facing an issue with executing Ajax in the template. The Ajax functionality works perfectly fine on my local machine, however, it's not working on Heroku. I've included a snip ...

javascriptjquerydjangoajaxheroku

Accessing store in Vue, the getter function returns a value representing whether the user is currently logged

I have the user state stored in my Vue store, but when I try to access it like this: let isLoggedIn = store.getters.isLoggedIn Instead of getting a simple true or false, I see this in the console: ƒ isLoggedIn (state) { return state.user ? true : false ...

javascriptvue.jsvuex

Python Selenium- Extract and print text from a dynamic list within a scrolling dropdown element

I am currently working on a project using Selenium and Python to extract a list of company names from a dropdown menu on a javascript-driven webpage. I have successfully managed to reveal the list of company names by clicking the navigation button, and eve ...

javascriptjquerypythoncssselenium