AnsweredAssumed Answered

Extending the sample JQuery Widget to use JQueryUI

Question asked by DevonTaig on Feb 5, 2015
Latest reply on Feb 24, 2015 by DevonTaig

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?

Outcomes