How to create a dialog using jquery-ui without htm

Question

Using jquery-ui to create a dialog is pretty easy:

<script>
$(function() {
    $( "#dialog" ).dialog();
});
</script>

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be   moved, resized and closed with the 'x' icon.</p>
</div>

...but one still needs a div in the HTML for this to work. In Dojo:

var dlg = new dijit.Dialog({
    title:"dialog",
    style: "width:30%;height:300px;"
});
dlg.show();

would just do the trick without anything specified in the html section, can jquery-ui do this? (I have to use jquery-ui here) Thanks,

David

Answer 1

basic code

var d = $("#someId");
if (d.length < 1)
    d = $("<div/>").attr("id", "someId")
                   .appendTo("body");
else
    d.dialog('destroy');
d.html('some message')
 .dialog({ some_options })
 .dialog("open");

and you can probably put rap this in an extension method.

Update (my full code listing)

(function($) {
    $.extend({
        showPageDialog: function (title, content, buttons, options) {
            /// <summary>Utility to show a dialog on the page. buttons and options are optional.</summary>
            /// <param name="buttons" type="Object">Dialog buttons. Optional, defaults to single OK button.</param>
            /// <param name="options" type="Object">Additional jQuery dialog options. Optional.</param>
            if (!buttons)
                buttons = { "Ok": function () { $(this).dialog("close"); } };
            var defOptions = {
                autoOpen: false,
                modal: true,
                //show: "blind",
                //hide: "explode",
                title: title,
                buttons: buttons
            };
            if (options)
                defOptions = $.extend(defOptions, options);
            var pd = $("#pageDialog");
            if (pd.length < 1)
                pd = $("<div/>").attr("id", "pageDialog")
                                .appendTo("body");
            else
                pd.dialog('destroy');
            pd.html(content)
              .dialog(defOptions)
              .dialog("open");
        }
    }//end of function show...
  )//end of extend Argument
})(jQuery)

Sample Usage

$.showPageDialog(title, message, {
                "Yes": function () {
                    $(this).dialog("close");
                    // do something for 'yes'
                },
                "No": function () {
                    // do something for no
                }
        }

Answer 2

While I'm not sure why you would want to open a dialog with no content, you could easily create a new one on the fly and invoke the jquery dialog against it:

$("<div>hello!</div>").dialog();

Answer 3

var div = document.createElement('div');
div.innerHTML = "Hello World";
$(div).dialog();

Answer 4

Juan Ayalas solution should work for modal Dialogs. For a non modal dialog it would be better to track the id inside the function. I use the following code which is not perfect but should work to ensure that the id is unique. The code is nearly equal to Juan Ayalas example but uses a counter to avoid a duplicate id. (Furthermore I deleted the OK-Button as default).

  (function($) 
  {
    var dCounter=0; //local but "static" var 
    $.extend({
    showPageDialog: function (title, content, buttons, options) {
        /// <summary>Utility to show a dialog on the page. buttons and options are optional.</summary>
        /// <param name="buttons" type="Object">Dialog buttons. Optional, defaults to nothing (single OK button).</param>
        /// <param name="options" type="Object">Additional jQuery dialog options. Optional.</param>
        if (!buttons)
            buttons = {}; //{ "Ok": function () { $(this).dialog("close"); } };
        var defOptions = {
            autoOpen: false,
            width: "auto",  
            modal: false,   
            //show: "blind",
            //hide: "explode",
            title: title,
            buttons: buttons
        };
        if (options)
            defOptions = $.extend(defOptions, options);
        dCounter++;
        //console.log("dCounter is " + dCounter);
        var pdId = "#pageDialog"+dCounter;          
        var pd = $(pdId);
        if (pd.length < 1)
            pd = $("<div/>").attr("id", pdId)        
                            .appendTo("body");
        else
            pd.dialog('destroy');

        pd.html(content)
          .dialog(defOptions)
          .dialog("open");   
    }//end of function showPageDialog
  }//end of extend options
  )//end of extend argument
  }//end of function definition