How to create jQuery Dialog in function

Question

Does anyone know how to create a jQuery Dialog in a function? I can't find an attribute to set the message... In every example I found, the dialog has been statically written into the code in a div-tag. However, I want to create it dinamically, so I need to know how to create a dialog in a function.

It is no problem to set the title:

    <script>
    // increase the default animation speed to exaggerate the effect
    $.fx.speeds._default = 1000;
    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode"
        });

        $( "#opener" ).click(function() {
            //$( "#dialog" ).dialog( "open" );
            $( this ).dialog({ title: 'Please confirm deletion!' });
            return false;
        });
    });
    </script>
</head>
<body>

I have the documentation and some examples here.

Thanks for helping out guys.

Cheers, doonot

============================= [SOLUTION]=====================================

Thanks for all who answered this questions. This is how i wanted it:

    function createDialog(title, text) {
    return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
    .dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Confirm": function() {
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
}

And it can be called for example like this (clicking on an image):

<img src="delete.png" onClick="createDialog('Confirm deletion!', 'Do you really want to delete this package?')">

Luke · Accepted Answer · 2011-02-02 20:23:16Z

13

function createDialog(title, text, options) {
    return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
    .dialog(options);
}

answered Feb 2, 2011 at 20:23

Luke

8,4173 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jared Farrish · Accepted Answer · 2011-02-02 20:27:12Z

7

Here is a simple example:

function openDialog(message) {
    if ($('#dialog').length == 0) {
        $(document.body).append('<div id="dialog">'+message+'</div>');
    } else {
        $('#dialog').html(message);
    }
    $( "#dialog" ).dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode"
    });
    $( "#dialog" ).dialog("open");
}

answered Feb 2, 2011 at 20:27

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

Comments

Luke · Accepted Answer · 2011-02-02 20:20:15Z

2

I used this with additionally jQuery tmpl plugin.

var confirmTemplate = jQuery.template("<div class='dialog' title='${title}'><p>${text}</p></div>");

   function showDialog(options) {
        if (options && options.data && options.dialog) {
            var dialogOptions = jQuery.extend({}, { modal: true, resizable: false, draggable: false }, options.dialog);
            return jQuery.tmpl(confirmTemplate, options.data).dialog(dialogOptions);
        }
    }

    function hideDialog (item) {
        if (!item.jQuery) item = $(item);
        item.dialog("close").dialog("destroy").remove();

}

usage:

showDialog({
             data: {
                      title: "My Title",
                      text: "my Text"
                   }
             dialog: {
                     myDialog: "options"
             }
           });

answered Feb 2, 2011 at 20:20

Luke

8,4173 gold badges24 silver badges36 bronze badges

1 Comment

nimrod Over a year ago

Thanks for the fast answer. Could you make an example how you use it in your code? I only get a syntax error on line "dialog: {..."

Collectives™ on Stack Overflow

How to create jQuery Dialog in function

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related