Extending the sample JQuery Widget to use JQueryUI

[RiverTaig1]

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:

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

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?

[NEvatt · Accepted solution]

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

[RiverTaig1]

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.