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

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.

Answer 2

If you want your libraries as Globals and not as AMD modules you can install the dependencies with bower and add the scripts to your index.html file as you would in a regular web site. In the case of Jquery you would still need to require it and declare the globals because Jquery detects in which context is running.

// Expose jQuery and $ identifiers, even in
// AMD (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
// and CommonJS for browser emulators (#13566)
if ( typeof noGlobal === strundefined ) {
    window.jQuery = window.$ = jQuery;
}

But for JqueryUI I would recommend installing it as global. Is possible that JqueryUI is also detecting the context. If that's the case it should infer there are no Global variable to be attached on. Here they say how to use it as an AMD module.

https://learn.jquery.com/jquery-ui/environments/amd/

Answer 3

In case jQuery-UI dialog import that module by:

import 'jquery-ui/ui/widgets/dialog';

Answer 4

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')