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

Itay · Accepted Answer · 2014-02-05 07:15:17Z

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

edited Feb 5, 2014 at 7:15

answered Feb 5, 2014 at 7:05

Itay

16.8k2 gold badges56 silver badges72 bronze badges

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

2 Comments

toothie Over a year ago

thnx! i didn't think that way, my bad :D

Itay Over a year ago

@Monique See the edit for a better approach, also if this answer was helpful please accept it.

Don Srinath · Accepted Answer · 2014-02-05 07:07:33Z

0

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

answered Feb 5, 2014 at 7:07

Don Srinath

1,6131 gold badge22 silver badges35 bronze badges

Comments

A Paul · Accepted Answer · 2014-02-05 07:12:00Z

0

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

answered Feb 5, 2014 at 7:12

A Paul

8,3033 gold badges33 silver badges65 bronze badges

Comments

Blundering Philosopher · Accepted Answer · 2014-02-19 02:27:44Z

0

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

edited Feb 19, 2014 at 2:27

Blundering Philosopher

6,8492 gold badges46 silver badges63 bronze badges

answered Feb 5, 2014 at 7:04

M.K

2183 silver badges10 bronze badges

2 Comments

toothie Over a year ago

i don't want to use any plugins

M.K Over a year ago

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

Collectives™ on Stack Overflow

Add a dialog using jQuery using html generated by jQuery

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related