Question

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.