Develop Reference

Datatable in laravel mix

I have some problem, and I was search for solving this problem, but I still didn't get the solving, I hope Anyone can help me to solve this problem, I put my code in below, Thanks :
webpack.mix.js :
mix.autoload({
jquery: ['$', 'jQuery', 'window.jQuery'],
})
mix.scripts([
.js('resources/js/app.js', 'public/js').version()
.js('resources/js/bootstrap.js', 'public/js').version()
.js('resources/js/occupant.js', 'public/js').version()
.sass('resources/sass/app.scss', 'public/css').version()
]);
bootstrap.js :
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('../../node_modules/datatables.net/js/jquery.dataTables.js');
require('../../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js');
} catch (e) {}
occupant.js :
var $ = require('jquery');
$(document).ready(function () {
$("#tblOccupant").DataTable(function () {
});
});
my console error :
occupant.js?id=043c6fbba06b4c7cd537:10984 Uncaught TypeError: $(...).DataTable is not a function

Your app is not able to locate datatables try following way to get it work
Instal depedencies via npm
npm install datatables.net-bs4
then
npm install datatables.net-buttons-bs4
add them to resources/js/bootstrap.js like
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');
Edit resources/scss/app.scss and add the following:
// DataTables
#import "~datatables.net-bs4/css/dataTables.bootstrap4.css";
#import "~datatables.net-buttons-bs4/css/buttons.bootstrap4.css";
Make sure your webpack.mix.js contains
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
and you have added
<link href="{{asset(mix('css/app.css'))}}" rel="stylesheet">
in the head of html and
<script src="{{asset(mix('js/app.js'))}}"></script>
just before closing </body> tag
then run npm run watch or npm run dev

use webpack JS package in twig file

I'm really beginner in twig and webpack.
I install some packages with yarn and use them inside app.js, but for some reasons I need some method of that packages inside of my twig files.
when I try to call a function, get error.
for example I install boostrap-select package and require that in app.js
// app.js
var $ = require('jquery');
require('bootstrap/dist/js/bootstrap');
require('bootstrap-select/dist/js/bootstrap-select');
$(document).ready(function () {
$('.selectpicker').selectpicker({});
})(jQuery);
everything is fine and work perfect but when call this package function inside of twig file like this
{% block javascripts %}
<script type="text/javascript" src="{{ asset('b/app.js') }}"></script>
<script>
$('.selectpicker').selectpicker({});
</script>
{% endblock %}
I get error.
Uncaught TypeError: $(...).selectpicker is not a function
after search in google for one day I found out can not do that ... and I must do some extra things ... every examples are around of jQuery.
what about other packages? how define a function from yarn packages globally and use that in twig file.
I try all of this solutions but not work for me
funtionName = require('package path')
window.functionName = functionName;
global.funtionNmae = functionName;
anyone has any solutions, I just need call a function in twig :(.

"This error happens when your code (or some library that you are using) expects $ or jQuery to be a global variable. But, when you use Webpack and require('jquery'), no global variables are set."
Symfony Frontend - FAQ and Common Issues
jQuery and Legacy Applications
// app.js
var $ = require('jquery');
// ...
global.$ = global.jQuery = $;

Importing JS files outside Webpack

So, i have a script that creates a global object
(function() {
window.GlobalThing = {}
})();
This script will also fill this object attributes
if (!GlobalThing .Resource) { GlobalThing .Resource = require('./Resource'); }
Then, some other scripts that are not bundled with webpack need to use this GlobalThing. I`ve tryed to make it global using ProvidePlugin for example:
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
'GlobalThing': path.join(__dirname,"Path/GlobalThing.js")
})
],
I've tryed adding an Alias as well
resolve: {
alias: {
'GlobalThing': path.join(__dirname,"Path/GlobalThing.js")
}
}
I have tryed doing something like this in the end of my GlobalThing.js file as well:
(function(){
window.GlobalThing = GlobalThing;
})();
Then i had to import to run the script, so i got a random js file inside the webpack to test it:
import GlobalThing from "GlobalThing ";
Still, it seems some scripts cannot seethe GlobalThing. If i bundle everything up with webpack, it works, but i didnt want to as our app is very old and have some very old stuff. Is there a way i can expose GlobalThing to those older scripts ?

ProvidePlugin takes a module name (i.e. string) and internally uses require to load it. So that wont help you in loading your own script.
That said, following should work:
Keep the GlobalThing script out of webpack bundling
Make sure the script itself is copied to the output folder
Make sure the index.html (or whatever html page you are using) has the scripts in the order GlobalThingScript.js followed by webpack bundle.js
To give you more insight:
When webpack bundles the scripts other than GlobalThingScript.js, it doesnt even know there is something called GlobalThing. It just bundles the other files.
That would mean it is upto you to make sure the GlobalThingScript.js is also made it to the final output folder. Also, the html source should use <script> tags to include the GlobalThingScript.js before webpack bundle.js.
In case problem persists, please do edit the OP to include the html source.
Hope that helps.

Jquery plugins giving errors $(...).ionRangeSlider not a function

I am trying to use jquery plugins in my react application. Every time I try to use some jquery third party plugin, I get an error saying $(...).somePlugin not a function. Currently I am trying to use ionRangeSlider. It is giving me error
Uncaught TypeError: (0 , _jquery2.default)(...).ionRangeSlider is not a function
js file
import $ from 'jquery'
import 'bootstrap-tagsinput'
class AddTagSection extends Component {
componentDidMount=()=> {
this.slider = $(this.inputSlider).ionRangeSlider();
}
<div className="irs-wrapper">
<input type="text" ref={node=>this.inputSlider=node} className='input-slider' id="ionSlider-newTag" name="ionSlider"/>
</div>
Below is the function which is getting called in ionRangeSlider.js (plugin)
$.fn.ionRangeSlider = function (options) {
return this.each(function() {
if (!$.data(this, "ionRangeSlider")) {
$.data(this, "ionRangeSlider", new IonRangeSlider(this, options, plugin_count++));
}
});
};
As far as I have read on web, this is a multiple jquery clashes issue.
About my Application: My project has jquery installed via npm. So there is one jquery present in package.json. I have also included jquery in scripts in my index.jade file. So there is another one there.
This is not an issue of jquery placed after plugin's js file. I placed jquery at the top in the scripts of index.jade file.
block head_scripts
script(src='https://code.jquery.com/jquery-3.2.1.min.js')
script(src='/public/ion.rangeSlider.js')
link(href='/public/normalize.css' rel="stylesheet")
link(href='/public/ion.rangeSlider.css' rel="stylesheet")
link(href='/public/ion.rangeSlider.skinFlat.css' rel='stylesheet')
I also tried noConfilct. But that too didn't work.
var $ = jQuery.noConflict();
$( ".slider" ).ionRangeSlider();
I tried including jquery in my webpack config.js file
new webpack.ProvidePlugin({
React: 'react',
$: 'jquery',
jQuery: 'jquery'
}),
Nothing from the above worked. Everytime I got the same error.
How can I solve this?

If your project contains a different version of jQuery than the one specified in ionRangeSlider package.json dependencies and you're using yarn to install your project's dependencies and webpack to bundle the project, then this might be the source of the problem. Yarn will install node_modules even in ion-range-slider folder, which will cause that the webpack will build the project with your jQuery, as well as with the one in ion-range-slider/node_modules. Hence the jQuery versions clash. ionRangeSlider initiates with the first jQuery and your project's jQuery won't contain it.
It's kind of a fault of ionRangeSlider developer because he should not specify the jQuery in dependencies, but instead in peerDependencies.

try changing internal url to external url for rangeslider
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css" />
then do import Slider from 'react-rangeslider' if not using the es6 transpiler then do var Slider = require('react-rangeslider')

I also had this error, looks like a Jquery version conflict please try downgrading ion-rangeslider in package.json "ion-rangeslider": "2.2.0".

Integrate jQuery into a electron app

I'm trying to add jquery functionality to a desktop app written in electron
Using the electron-quick-start repo i'm adding the downloaded jquery file to the main.html file like so:
<script> require("./jquery.min.js"); </script>
or so:
<script>window.$ = window.jQuery = require('./jquery.min.js');</script>
Then in the index.js file i'm adding code in the createWindow function, since that seems the proper place, but to be honest any place i try gets me the same error more or less.
mainWindow.$ is undefined and the same goes for BrowserWindow and app
mainWindow is defined inside the createWindow function like so:
mainWindow = new BrowserWindow({width: 800, height: 600})
and BrowserWindow is declared on top of the file like so:
const BrowserWindow = electron.BrowserWindow
Any idea where i'm going wrong, what declarations i should change/add?
Thanks in advance

While using electron, some additional symbols are also inserted into DOM causing problems. So, you can use jquery as follow
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>
Notice the code inside "onload".

When you call require inside index.js, or the main process, it's looking for the node module. So you'll need to install jQuery via npm and save it as a dependency in your apps package.json file.
npm install jquery --save
Then your index.js should theoretically see it just fine using
let $ = require('jquery');
mainWindow.$ = $;
Refer to the Node.JS section for installing jQuery. This is what Electron uses.
--
OLD ANSWER
Inside your main.html, just include the JavaScript like you would any traditional JS file.
<script src="./jquery.min.js"></script>

To integrate jQuery into your Electron Application follow these simple steps
Step 1: Run in terminal
npm install jquery --save
Step 2: Add this line to your angular.json or angular-cli.json file
"build": {
"options": {
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js", //add this line
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
...
...
}
}
Step 3: Finally add this line to your index.html file
<!-- Need this for jQuery electron -->
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {
window.module = module;
module = undefined;
}</script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
</head>
You can also use this template