Generate multiple jquery-UI dialog

Question

I have placed my jquery dialog content in a div. But whenever I'm initializing the dialog in this way:

$(".uof_add_form").dialog({
  autoOpen : false,
  height : 500,
  width : 600,
  modal : true,
  buttons : {
   "Done" : function() {
    $(this).close();
  }
  }
});

The content gets removed from my div. And for this reason I can not use

$("#new_form").on("click",".add_level", function(){
        var wrapper_data = $(this).parent().parent().parent().parent();
        wrapper_data.find(".uof_add_form").dialog("open");

});

to open my dialog.

As my contents are generated dynamically I need to use $(this).

Is there any way with which my content will stay inside of my div?

I changed my code to initialize on the click itself doing display:none on my div in this way:-

$("#new_form").on("click",".add_level", function(){
    var wrapper_data = $(this).parent().parent().parent().parent();
    wrapper_data.find(".add_level_pop").dialog({autoOpen : true, height : 500,width : 600,modal : true, buttons : {   "Done" : function() {  $(this).dialog('close'); } } });

});

The dialog opens on first click but on second click the dialog doesn't gets fired because the content has been transferred to a different place on initialization of the dialog.

I have also added a sample on jsfiddle please check here

Wolfram · Accepted Answer · 2013-04-09 12:15:16Z

1

Although I am not sure that I understand your initial problem, from looking at the code in your fiddle, you might want to consider to:

omit the class qualifier in your selector when you already have an ID, which will stick to the dialog element so you can always find your <div> in the DOM (fiddle v3)
save the <div> to a variable on load, so you can access it without querying the DOM for it (fiddle v4)

In both updated versions of your fiddle the dialog opens on second click, if that is what you are looking for. Hope it helps.

As you try to solve a more generic situation, I have updated your example accordingly in another fiddle version. The dialog div is saved on the button using the .data() function. To open the dialog, the saved dialog is used.

edited Apr 9, 2013 at 12:15

answered Apr 9, 2013 at 9:04

Wolfram

8,0973 gold badges49 silver badges69 bronze badges

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

6 Comments

Sachin Prasad Over a year ago

Sorry,Not exactly what I want, I can not do this var $dialog = $( ".wrapper #dialog" ); as I don't know what will be my new generated ID and in which wrapper div it belongs to.

Wolfram Over a year ago

But you should know at some point what id you have and be able to save a reference to the new element. A more dynamic example would help to understand the problem. Another thing (although you said that you can not use that part anyways): you should not use a chain of .parent() calls, try using jQuery's .closest(selector) instead.

Sachin Prasad Over a year ago

Please check the jsfiddle code now, I have updated it. And please note that wrapper div is auto-generated.

Wolfram Over a year ago

You have duplicate IDs now.

Sachin Prasad Over a year ago

Even if I replace all the IDs with class the issue remains the same. jsfiddle.net/sachinprasad/2Pv3q/6

|

Nick Andriopoulos · Accepted Answer · 2013-04-08 14:26:37Z

0

Use the return value of .dialog() as a handle :

var handle = $(".uof_add_form").dialog({
 [...]
});

then at some point,

handle.dialog("open");

answered Apr 8, 2013 at 14:26

Nick Andriopoulos

10.7k6 gold badges34 silver badges56 bronze badges

3 Comments

Sachin Prasad Over a year ago

I cannot use handle as my contents are generated dynamically

Nick Andriopoulos Over a year ago

is it possible then to initialize the dialog at the point where you currently open it ? ie something like wrapper_data.find('uof_add_form').dialog({ ... }) with autoOpen: true (and without the original declaration for dialog)?

Sachin Prasad Over a year ago

Please check my updated question what happened when I did as you said.

Collectives™ on Stack Overflow

Generate multiple jquery-UI dialog

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related