Add a dialog using jQuery using html generated by jQuery

Question

I want to add a jQuery dialog using an string containing html code stored in a variable. Is it possible? Here is some of the tried code .

 $("#remove-post").dialog({
     autoOpen: false,
     height: 'auto',
     width: 'auto',
     modal: true
 });
 $("body").delegate("a.delete-post", "click", function (e) {
     e.preventDefault();
     button = $(this);
     remove_dialog_html = '<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>';
     $('#remove-post').dialog("open");
 });

Answer 1

You can simply change the html of this element.

$('#remove-post').html('<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>');

jsFiddle Demo

Edit:

You can also avoid adding the dialog to the original HTML file, by creating and destroying it when you open and close the dialog.

 $('<div></div>')
        .appendTo('body')
        .html(htmlContent)
        .dialog({
            autoOpen: true,
            height: 'auto',
            width: 'auto',
            modal: true,

            close: function (event, ui) {
                $(this).remove();
            }
        });

jsFiddle Demo

Answer 2

Please Refer this link link

Thanks!!

Edit: Try this:

$(document).ready(function () {
    $("#divModifyDatesDialog").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        draggable: false,
        position: "center",
        width: 550,
        buttons: {
            "Yes": {
                click: function () {
                -------------
            },
            "No": {
                click: function () {
                    ------
                }
            }
        }
    }); 

Answer 3

You cannot initialize jQuery dialog like this since it is not in the DOM at the page load time (where jQuery initialize the stuff). What you have to do is that initialize dialog after adding the html to the DOM. Just before $('#remove-post').dialog("open");

Answer 4

Are you looking for something like this. Check the fiddle below. Changed the code as per your requirement if this is what you are looking for.

http://jsfiddle.net/8R7xA/1/

$("#remove-post").dialog({
      autoOpen: false,
      height:'auto', 
      width:'auto',
      modal: true
});

$(document).ready(function(){

   var remove_dialog_html= '<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>';
   $('#remove-post').html(remove_dialog_html);
   $('#remove-post').dialog("open");
});