CODEWITHSUNDEEP
javascriptjqueryreactjs
Azad Hussain
Azad Hussain

Reputation: 161

External Vendor Scripts( JS, Jquery) Not working after render in ReactJS

I am creating a web app frontend using ReactJS. I have downloaded a Template from W3layout which is designed using HTML5 CSS3 Custom JS file and also includes some third party/vendor JS/Jquery Plugins Like nice-select, bootstrap,slik, owl-carousel, etc

I am not a Front End Developer My expertise are in Serverside scripting & Database. So I just wanted to use the same downloaded template to develop ReactJS application.

But When page Loads/render 1st time its work fine but on navigating to other Route /Component Jquery/Other Vendor Scripts Stop Working.

Even I wanted to trigger update/change to the plugins Like

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

All these are not working.

This is my Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="shortcut icon" href="/img/fav.png">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta charset="UTF-8">
        <!-- Site Title -->
        <title>Training</title>

    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet"> 
  <!--  CSS
  ============================================= -->
        <link rel="stylesheet" href="/css/linearicons.css">
        <link rel="stylesheet" href="/css/font-awesome.min.css">
        <link rel="stylesheet" href="/css/bootstrap.css">
        <link rel="stylesheet" href="/css/magnific-popup.css">
        <link rel="stylesheet" href="/css/nice-select.css">                         
        <link rel="stylesheet" href="/css/animate.min.css">
        <link rel="stylesheet" href="/css/owl.carousel.css">            
        <link rel="stylesheet" href="/css/jquery-ui.css">           
  <link rel="stylesheet" href="/css/main.css">
  
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />  </head>
<body>     <div id="root"></div>

<script src="/js/vendor/jquery-2.2.4.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="/js/vendor/bootstrap.min.js"></script>         
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
        <script src="/js/easing.min.js"></script>           
        <script src="/js/hoverIntent.js"></script>
        <script src="/js/superfish.min.js"></script>    
        <script src="/js/jquery.ajaxchimp.min.js"></script>
        <script src="/js/jquery.magnific-popup.min.js"></script>    
        <script src="/js/jquery.tabs.min.js"></script>                      
        <script src="/js/jquery.nice-select.min.js"></script>   
        <script src="/js/owl.carousel.min.js"></script>                                 
        <script src="/js/mail-script.js"></script>  
        <script src="/js/main.js"></script>

How can we use the existing vendors script on our react js without any issue .

Upvotes: 1

Views: 2354

Answers (1)

UjinT34
UjinT34

Reputation: 4987

jQuery binds its listeners to the existing dom elements. When the dom changes new nodes don't get those listeners automatically. You need to call the initialization phase of each jQuery script after the navigation (and any other significant dom change). Alternatively you can make those listeners to listen to document instead:

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

should become

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

As a fast fix you can force React Router to reload the page on every navigation:

<BrowserRouter forceRefresh/>

But you are likely to get similar troubles with other react components.

Some hints to fix the issue:

  1. try to replace jQuery plugins with react modules

  2. use the history object provided by React Router to listen for navigation changes and reinit jQuery code

  3. use componentDidMount and componentDidUpdate to bind and update jQuery listeners

Upvotes: 1

Related Questions