CODEWITHSUNDEEP
javascriptjqueryhtml
toothie
toothie

Reputation: 1029

Add a dialog using jQuery using html generated by jQuery

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");
 });

Upvotes: 0

Views: 52

Answers (4)

M.K
M.K

Reputation: 218

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

Upvotes: 0

Itay
Itay

Reputation: 16777

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

Upvotes: 1

A Paul
A Paul

Reputation: 8251

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");
});

Upvotes: 0

Don Srinath
Don Srinath

Reputation: 1593

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

Upvotes: 0

Related Questions