CODEWITHSUNDEEP
jquery-uidialog
David Zhao
David Zhao

Reputation: 4514

How to create a dialog using jQuery UI without a <div> specified in the HTML code?

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 you still need a <div> in the HTML for this to work.

Is it possible to use purely jQuery (without a <div> in the HTML code) to create a dialog?

Upvotes: 8

Views: 19028

Answers (4)

karo
karo

Reputation: 33

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

Upvotes: 0

Juan Ayala
Juan Ayala

Reputation: 3518

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
                }
        }

Upvotes: 4

Justin Beckwith
Justin Beckwith

Reputation: 7866

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();

Upvotes: 20

steve
steve

Reputation: 1856

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

Upvotes: 2

Related Questions