How should jQuery plugins be incorporated into a widget?

1
I'm learning how to build widgets, and am attempting to build a widget that uses the jQuery plugin found here (I'm a Javascript/jQuery beginner). The goal is to give an input box better masking functionality. The plugin adds a .mask() function to the jQuery object, and I need help accessing that function in my widget. I started with the OnChange Input Box, added the plugin source to the required modules, and attempted to access the .mask() function, but was unsuccessful. Detailed steps are below. Can anyone give guidance on how to use a jQuery plugin in a widget? Detailed steps Add the plugin source file to \WidgetHomeDirectory\src\lib (maskedInput.js) In the widget, add the path and corresponding parameter name to define (I added them after the entries for the jQuery library) Modified line 8 of maskedInput.js to read return jQuery to resolve a compile error The red box in this image shows where I attempt to use .mask(). My browser reports "Could not create widget mxui.widget.PrimitiveWidgetWrapper: TypeError: $(...).mask is not a function". The syntax was copied directly from the developer's web site screenshot:
asked
3 answers
6

Hi Matt,

The approach I found best is:

Add JS files to lib folder

Add both the jQuery and jQuery plugin JavaScript file into your <widgetname>/widget/lib folder.

Correctly setup require

In your main widget file, add the libraries like below:

        require({
        packages: [
            { name: 'jquery', location: '../../widgets/<widgetname>/widget/lib', main: 'jquery-1-10-2' },
            { name: 'jqueryplugin', location: '../../widgets/<widgetname>/widget/lib', main: 'jqueryplugin'}

        ]
    },[
        "dojo/_base/declare",
        "dojo/NodeList-traverse",
        "mxui/widget/_WidgetBase",
        "dijit/_TemplatedMixin",
        "mxui/dom",
        "dojo/dom-style",
        "dijit/registry",
        "dojo/keys", 
        "dojo/on",
        "dojo/domReady!",
        "dojo/dom-construct",
        "dojo/_base/lang",
        "dojo/parser",
        "dojo/_base/array",
        "dojo/text!ColorPicker/widget/ui/ColorPicker.html",
        "jquery",
        "jqueryplugin"
    ], function(declare, NodeList, _WidgetBase,_TemplatedMixin, dom, domStyle, registry,keys, on,ready,domConstruct,dojoLang,parser,dojoArray,widgetTemplate,jquery){
"use strict";

Add noConflict

To make sure your project does not get conflicts with other externally loaded versions of jQuery (multiple widgets from the AppStore do this), you have to include, after the above code:

    var $ = jquery.noConflict(true);

These three steps should do the trick as it did for multiple of my widgets. Good luck!

answered
0

There is a specific change you need to make in you jquery.js file to be able to load it as is mentioned (var $ = jquery.noConflict(true);).

See the following line from the AppStoreWidgetBoilerplate where "jquery" was removed: https://github.com/mendix/AppStoreWidgetBoilerplate/blob/0553e57b920f8867403768bca61ab367caac4574/src/WidgetName/lib/jquery-1.11.2.js#L10307

answered
0

Hi all, thanks for the responses. I was able to find a satisfying minimal fix.

Line 8 of the plugin reads:

"function" == typeof define && define.amd ? define([ "jquery" ], factory) : factory("object" == typeof exports ? require("jquery") : jQuery);

I concluded that the string "jquery" is a path to the base jquery library. Thus, the fix was to update this string to the appropriate path:

"function" == typeof define && define.amd ? define([ "InputBoxOctober/lib/jquery" ], factory) : factory("object" == typeof exports ? require("InputBoxOctober/lib/jquery") : jQuery);

 

(To be explicit: InputBoxOctober (also my widget name) is the folder at the same level as package.xml, and within InputBoxOctober are lib and widget folders, and InputBoxOctober.xml.)

answered