Hey all!
Can anyone please provide me an example of a working hex library that includes a javascript jquery plugin?
I’ve been trying to develop a hex library that includes a whole bunch of JavaScript, and have been running into a few specific problems.
Here’s the library:
And here’s my phoenix app.js:
import css from "../css/app.scss"
import $ from "jquery"
window.jQuery = $
window.$ = $
import "bootstrap"
import "phoenix_html"
import "ex_effective_bootstrap"
So in the library, I import and use “bootstrap-select.min” and “jquery.maskedInput.js” and initialize these on $(document.ready()
from inside the library.
This is run when I do `import “ex_effective_bootstrap”. It works great the first time. The jquery plugins are run. I get the expected result – fancy form fields.
What I do not get, is the ability to call .selectpicker()
or .mask()
on the window.$
in the browser.
Similarly, I can create events inside the hex library with the $(document).on 'my-custom-trigger', function(event) {}
syntax. But then I run $(document).trigger('my-custom-trigger')
in the browser, the events are not triggered. This once again leads me to believe that I have like two instances of jQuery going on.
I have explored all kinds of webpack providePlugin, exports, require vs include, using const, globals, expose-loader and other webpack plugins without any success.
Please I’d love to see a working example
Any help would be much appreciated