JQuery Ui and Electron

Question

I've recently started trying to make a desktop application using Electron and got Jquery working in the app.

I installed the following packages with NPM install package -save

Node package dependencies:

"electron-prebuilt": "^0.36.0",
"jquery": "^2.1.4",
 "jquery-ui": "^1.10.5"

And I'm using the following code to run Jquery and Jquery Ui

window.$ = window.jQuery = require('jQuery');
require("jquery-ui");

problem: Jquery is loaded across the app, but UI isn't.

HTML EG:

<div id="bod">
  text
</div>
<script>
  $( "#bod" ).click(function(){
      var div = $("<div></div>").load("./html/testDialogue.html" );
      console.log( div );// jquery works like expected
      $(this).dialog();// UI not apart of JQuery extensions.. or loaded at all
  });
</script>

Answer 1

The jquery-ui package is specifically made to be built after the installation.

Try the jquery-ui-dist package instead: npm i jquery-ui-dist

Then you can just require it like this:

var $ = jQuery = require('jquery')
require('jquery-ui-dist/jquery-ui')

Answer 2

For anyone else like me who came across this trying to globally load jQueryUI into your electron app - the best way to do this is not to install the jquery-ui NPM package, but to download the minified jQueryUI script from the CDN, store it locally in a resource folder and include it in your index directly below the line declaring your global jQuery variable and above the renderers you want to use it in, like so:

<script>window.$ = window.jQuery = require('jquery');</script>
<script src="../assets/js/jquery-ui.min.js"></script>
<script src="render.js"></script>

This will give access to all jQueryUI functions via the global jQuery variable within your render scripts.