Having Many Problems with Jquery UI 1.8.1 Dialog.js

Question

Hi

I been using the jquery ui for quite a while now. This is the first time using 1.8 though and I am not sure why but it seems to me this plugin has taken steps backwards.

I never had so much difficulty to use the Jquery UI as I am having now.

First the documentation is out of date.

Dependencies

* UI Core
* UI Draggable (Optional)
* UI Resizable (Optional)

After line 20mins of trying and getting error after error (like dialog is not a function) I realized that you need some other javascript file called "widget.js"

So now I have

Jquery 1.4.2.js 
 UI Core.js UI
 Widget.js 
 UI Dialog.js

all on my page.

I then did something like this

  $('#Delete').click(function ()
    {
        var dialogId = "DeleteDialogBox";
        var createdDialog = MakeDialogBox(dialogId, "Delete Conformation");

        $('#tabConent').after(createdDialog);
        dialogId = String.format('#{0}', dialogId);

        $(dialogId).dialog({
            resizable: true,
            height: 500,
            width: 500,
            modal: true,
            buttons: {
                'Delete all items': function() {
                    $(this).dialog('close');
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
        });
    });

      function MakeDialogBox(id, title)
    {
        var dialog = String.format('<div id="{0}" title="{1}"></div>', id, title);
        return dialog;
    }

Now what this should be doing is it makes a where the dialog box should go. After that it should put it right after my tabs.

So when watching it with firebug it does this. However once does the .dialog() method it moves the + all the stuff it generates and puts it after my footer.

So now I have my dialog box under my footer tucked away in the bottom right hand corner. I want it dead in the center. In previous versions I don't think it mattered where the dialog code was on your page it would always be dead center.

So what am I missing? The center.js(I don't know if this exists but seems like you need 100 javascript files now to get this to work proper).

Answer 1

Try construct a dialog "on the fly".

$('<div>test</div>').dialog({/* your options here */});

Also get the non-compressed versions of jQ-UI sources and look into dialog.js - all dependencies are written right in its header comment.

Answer 2

I think the problem here is missing CSS. However, you can make this all simpler :) All those script files are combined and minified when they do a release, for example here's the full version and here's the minified one (version 1.8.1 at the time of this answer). This way you include 1 script file instead of caring about which UI scripts in what order.

Overall, you can simplify life greatly by downloading jQuery UI via the mechanisms they provide, take a look at the jQuery UI download page. You can customize whatever you want and download a zip, then all you need to include is these 3 files: jQuery, jQuery UI, and the jQuery UI CSS (which points to the images it needs). Alternatively you can use a CDN for all 3, like this:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'&gt;&lt;/script&gt; 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"&gt;&lt;/script&gt; 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" type="text/css" />

If you're comfortable with one of the built-in themes you can use a CDN for everything like above, just replace base with the theme name, you can find a full list here (just change 1.7.2 to the current version in the URL)