jQuery UI specific use. Which .js to download?

Question

I am looking to test Widgets -> Dialog -> Modal Confirmation.

jquery-ui.js is heavy to load just for a specific use. From JQ UI site I downloaded a folder containing lots of small .js files

I guess they are part of the main js. I've tested to only load jquery.ui.widget.js and jquery.ui.dialog.js but I get this console error:

Uncaught TypeError: Object function ( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); } has no method 'widget'

Next codes are copy of the jQ UI sample from http://jqueryui.com/dialog/#modal-confirmation

Sample displays and works as expected loading the heavy query-ui.js file only

src="/js/jquery.ui.dialog.js"
src="/js/jquery.ui.widget.js"

$(function() {
      $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        width:350,
        modal: true,
        buttons: {
          "Accept": function() {
            $( this ).dialog( "close" );
          },
          "Refuse": function() {
            $( this ).dialog( "close" );
          }
        }
      });
    });

HTML

<div id="dialog-confirm" title="Confirmation">
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Select your option</p>
</div>

Answer 1

If you just want to use and download the files which are necessary for the dialog widget visit the jQuery UI Download Builder

Uncheck the "Toggle all" checkbox and only check Widgets -> Dialog. Each other file which is necessary gets checked automatically. The according link is this one. Note that you can change the CSS configuration at the bottom of the page above the download button.

The downloaded .zip should contain 3 folders

js

development-bundle

css

The important one is the js folder which includes a jQuery version (no UI without jQuery) and your customized jQuery UI .js files. One in readable form, one minified. If you open the jquery-ui-1.10.3.custom.js file you can see what it includes. In your case this should be:

jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.position.js, jquery.ui.draggable.js, jquery.ui.resizable.js, jquery.ui.button.js, jquery.ui.dialog.js

I hope I got your question right and this is what you want.