How can I return an initialized dialog object from function?

I'm currently trying to learn OO Javascript so I can write some cleaner code. In my code below I am using the JQuery UI Dialog object and my own class so I can easily initialize lots of Dialogs.

The problem is the function is not returning the dialog object, so I can't access the method and properties from it.

  /*
*  Load AddTaskForm dialog
*/
$('#AddTask').click(function ()
{
    /* Ajax request to load form into it */
    $.ajax({
        type: 'Get',
        url: '/Planner/Planner/LoadAddTaskForm',
        dataType: 'html',
        success: function (AddTaskForm)
        {
            var d = new AddDialog();
            var result = d.Dialog();

              /* AddTaskDialog.html(AddTaskForm);
            AddTaskDialog.dialog('open');*/
        }
    });
});



function AddDialog()
{
    this.Dialog = function()
    {
        $('<div></div>').dialog(
        {
            width: 580,
            height: 410,
            resizable: false,
            modal: true,
            autoOpen: false,
            title: 'Basic Dialog',
            buttons:
                {
                    Cancel: function ()
                    {
                        $(this).dialog('close');
                    },
                    'Create Task': function ()
                    {

                    }
                },
                close: function ()
                {
                    $(this).dialog('destroy').remove();
                }
        });
    } 
}

** Updated Code

  /*
*  Load AddTaskForm dialog
*/
$('#AddTask').click(function ()
{
    /* Ajax request to load form into it */
    $.ajax({
        type: 'Get',
        url: '/Planner/Planner/LoadAddTaskForm',
        dataType: 'html',
        success: function (AddTaskForm)
        {
            var AddTaskDialog = $('<div></div>');
            AddTaskDialog.dialog(AddTaskDialogOptions);
            AddTaskDialog.html(AddTaskForm);
            AddTaskDialog.dialog('open');
        }
    });
});


/*
*  Add task dialog default op开发者_C百科tions
*/
var AddTaskDialogOptions = {
    width: 580,
    height: 410,
    resizable: false,
    modal: true,
    autoOpen: false,
    title: 'Basic Dialog',
    buttons:
        {
            Cancel: function ()
            {
                $(this).dialog('close');
            },
            'Create Task': function ()
            {

            }
        },
    close: function ()
    {
        $(this).dialog('destroy').remove();
    }
}

This works

 /*
*  Load AddTaskForm dialog
*/
$('#AddTask').click(function ()
{
    var addTaskDialog = $('<div></div>');
    addTaskDialog.dialog(AddTaskDialogOptions);
    addTaskDialog.html('wowowo');
    addTaskDialog.dialog('open');  
});

This does not work

 /* Ajax request to load form into it */
    $.ajax({
        type: 'Get',
        url: '/Planner/Planner/LoadAddTaskForm',
        dataType: 'html',
        success: function (AddTaskForm)
        {
            var addTaskDialog = $('<div></div>');
            addTaskDialog.dialog(AddTaskDialogOptions);
            addTaskDialog.html(AddTaskForm);
            addTaskDialog.dialog('open');  
        }
    });

---

That´s because you dont "return" any dialog, but a function...

And btw this kind of coding is everything, but not clean! The dialog is already a class, it is already a object. Same like jQuery. You don´t need to wrap it into a function, then into another class.

jQuery ui dialog is a jquery ui widget. that means, that you can easily access this using $("something").dialog("widget") and you get the instance of the dialog.

if you want it anonymous but accessable you should do this.

var myDialogMarkup = $("<div></div>").dialog();

and when you want it back, you do myDialogMarkup.dialog("widget") or myDialog.dialog("methodtodo")

and if you want to do always the same dialog, just do this

var myDialogDefaultVars = {
            width: 580,
            height: 410,
            resizable: false,
            modal: true,
            autoOpen: false,
            title: 'Basic Dialog',
            buttons:
                {
                    Cancel: function ()
                    {
                        $(this).dialog('close');
                    },
                    'Create Task': function ()
                    {

                    }
                },
                close: function ()
                {
                    $(this).dialog('destroy').remove();
                }
        }

and then

$("<div></div>").dialog(myDialogDefaultVars);

Update

If you insist to do it your style

function AddDialog()
{
    this.Dialog = function()
    {
         return $('<div></div>').dialog(
        { ... });
    }
}

just "return" it :)

or if you want to just return the component

function AddDialog()
{
    this.Dialog = function()
    {
         return $('<div></div>').dialog(
        { ... }).dialog("widget");
    }
}

the dialog("widget") will give you the widget-component. Then you could do

var d = new AddDialog();
d.Dialog().close();

---

When we use jQuery we follow some basic rules.

var AddTaskDialog = $('<div></div>');
            AddTaskDialog.dialog(AddTaskDialogOptions);
            AddTaskDialog.html(AddTaskForm);
            AddTaskDialog.dialog('open');

u dont work like this. instead you do this.

var $dialog = $("<div></div>")
             .append(AddTaskForm)
             .dialog(AddTaskDialogOptions)
             .dialog("open");