2

I'm having a basic misunderstanding on how to use JQuery and JQuery.spinner with TypeScript.

I've moved the javascript entry point of an existing project from html tag to it's own TypeScript file "main.ts" and am using webpack to deal with module dependencies.

Within "main.ts", I use:

import $ = require("jquery");
import "jquery-ui";

And link "jquery" to a local .js library in the "webpack.config.js" as follows:

var path = require('path')

module.exports = {
  entry: './built/main.js',
  output: {
    path: path.resolve(__dirname, './'),
    filename: 'webpack-bundle.js'
  },
  module : {
    rules :
    [{
      oneOf:
      [{
          resourceQuery : 'jquery',
          use : './js/jquery-3.1.1.min.js'
      },
      {
          resourceQuery : 'jquery-ui',
          use : './js/jquery-ui.min.js'
      }
    ]
    }]
  },
}

This compiles correctly, but I have two problems:

1) At runtime the spinner arrows don't show up as they do in the original project (first one's mine, second one is the spinner in the original project):

Spinner after my changes

Spinner in Original Project

2) My queries return a value that looks like "r.f.init(1)." In particular this line of javascript return "r.f.init(1)":

$('#backgroundColorR').spinner('value')

Where the html contains: <input type="text" id="backgroundColorR" value="0.0">

I'm not sure where the problem stems from, and other answers on here haven't helped out. I'm sure this is a basic question, but I'm at a loss here after much looking around here and at the JQuery UI API.

user2852952
  • 95
  • 1
  • 9
  • What does the final HTML look like for your version and the one of the original project? Did you check if the necessary CSS has been loaded in from jQuery? In general, what you've written here should work. (Sidenote: personally I'd use `import * as $ from "jquery";` and `import "jquery-ui";`, though I doubt it will make a difference here). – Stanislas Mar 01 '18 at 20:49

1 Answers1

4

After many hours of trial and error, I came to a solution that works:

import * as $ from "jquery";
import "jquery-ui/ui/widgets/spinner";

Checking webpack with the --verbose option shows that it actually loads a chain of jquery-ui dependencies, whereas just having import "jquery-ui" would only show a few jquery dependencies.

It seems that each widget would have to be loaded manually in this way; thankfully I'm only using a spinner.

user2852952
  • 95
  • 1
  • 9