I am trying to integrate a react front end application to laravel backend using "php artisan preset react". There was some problem when i use select2 library in this.
Normally, in a create-react-app application, i can simply link and script select2's cdns in public/index.html file inside "head" tag. Then use jquery and select2 like this inside a src/components/*.js file:
import React, { Component } from 'react';
// REACT ROUTER
import { Route, Link } from "react-router-dom";
// IMPORT HEADERBODY'S COMPONENTS
class HeaderBody extends Component {
constructor(props) {
super(props);
this.state = {
Provinces: [],
};
this.select2PX = this.select2PX.bind(this);
}
select2PX(){
window.$(document).ready(function() {
window.$('#phuong-xa').select2();
});
}
componentDidMount(){
this.select2PX();
}
render() {
//html in here
);
}
}
export default HeaderBody;
but when i does this inside php artisan preset react, it doesn't seem to work. To be more specific, i did it like this.
resoures/views/App.blade.php:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="">
<title>Netdi Laravel-React</title>
<!-- Sources -->
<script src="./js/popper.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- CAROUSEL -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- BAR RATING -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.1/themes/bars-reversed.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.1/jquery.barrating.min.js"></script>
<!-- GOOGLE MAP -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!-- SELECT2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="./css/normalize.min.css" />
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/common.css" />
<link rel="stylesheet" href="./css/home-page.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<div id="footer"></div>
<!-- <div id="MapModal"></div>
<div id="LoginModal"></div> -->
<script src=""></script>
</body>
</html>
then inside resoures/assets/js/React/index.js:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './App';//App.js is similar as above.
import Footer from './Components/Footer';
ReactDOM.render(<App />, document.getElementById('app'));
ReactDOM.render(<Footer />, document.getElementById('footer'));
Then i run
npm run dev
php artisan serve
it doesn't render anything, and logs this error in the console:
Uncaught TypeError: window.$(...).select2 is not a function
at HTMLDocument.<anonymous> (app.js:61646)
at mightThrow (app.js:7551)
at process (app.js:7619)
It seems that Jquery is work perfectly fine, the only thing that cause this problem is select2(). What is the problem here, and how can i fix it?
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire