topic Extending the sample JQuery Widget to use JQueryUI in Web AppBuilder Custom Widgets Questions

Extending the sample JQuery Widget to use JQueryUI

RiverTaig1 — Thu, 05 Feb 2015 16:19:34 GMT

I have the "UseJQuery" sample widget working (it's located in the arcgis-web-appbuilder-1.0\client\stemapp\widgets\samplewidgets directory). That's great, but now what I want to do is make use of JQuery modal dialogs. I have a generic HTML page where this works, but I'm not sure how to make dialogs work in the widget. In the HTML page, I have references the library using a script tag like so:

Then in the JQuery Ready function I'm doing this to :

var btn = $('#btnShowModalDialog');

btn.click(function() {

$("#popupdiv").dialog({

open: function(event, ui){

//do something in the open function which will ultimately show the contents of popupdiv

title: "Cost Items for DX Feature",

width: 430,

height: 500,

modal: true,

buttons: {

Close: function() {

$(this).dialog('close');

}

});

So the question is how and where do I reference external JQuery libraries in the widget, and how would I write corresponding code in Widget.js? I'm assuming that I can put the hidden popupdiv and the btnShowModalDialog button in Widget.html, right?

Re: Extending the sample JQuery Widget to use JQueryUI

NEvatt — Tue, 10 Feb 2015 10:34:40 GMT

Hi River,

I know this doesn't totally answer your question, but what I have done is added JQuerythrough the init.js page under resources "resources = resources.concat([" - you can then point to a local file or to the external link for JQuery. The reason that I do it this way instead of in the widget is because I end up using JQueryin a few of my widgets in the same application and therefor don't want to add it in individually each time.

As far as where to insert the code inside of widget.js, inside the "startup: function (){" works fine for me. Yes, you are able to insert the popupdiv and the btnShowModalDialog button inside of Widget.html.

-Nat

Re: Extending the sample JQuery Widget to use JQueryUI

RiverTaig1 — Tue, 24 Feb 2015 18:00:48 GMT

What I'm finding is that the order that references are listed in init.js resources does NOT guarantee the order in which things load. For example, I have the following:

resources = resources.concat([

'http://code.jquery.com/jquery-latest.min.js',

'http://code.jquery.com/ui/1.10.3/jquery-ui.js',

'http://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js',

'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css',

window.path + 'css/jquery.dataTables.css',

window.path + 'css/ESRIOverride.css',

window.apiUrl + 'dojo/resources/dojo.css',

window.apiUrl + 'dijit/themes/claro/claro.css',

window.apiUrl + 'esri/css/esri.css',

window.apiUrl + 'dojox/layout/resources/ResizeHandle.css',

window.path + 'jimu.js/css/jimu.css'

]);

Sometimes, jquery-latest.min.js loads first (which is what I want) and things work. At other times, jquery-ui will load first and because it has dependencies on jQuery, it causes problems.

How do you mandate that one .js file loads before another? Must I modify script tags in index.html? That doesn't seem like a very good practice.