ansaurus

Question

Using jQuery UI's dialog("destroy") puts element in wrong place?

Answer 1

A:

Maybe add some code else it's hard to tell where/why your code might fail

You could just do it like this or similar

<input id="text" name="textname" type="text">
<input
  type="button"
  value="Pop me up"
  onclick="$('#text').clone().dialog({
    modal:true,
    close: function(event, ui) {
        $('#text').val(this.value);
    }
  });"
>

Check for a sample http://jsbin.com/ujema/

jitter 2009-11-18 02:39:35

Answer 2

+3 A:

Yeah, that's a 'feature'...haha...ran into it a while back. Here are a few 'gotchyas' and then a really hackity way of dealing with them (albeit effective if you're planning to have many subforms):

When you create a dialog, jquery remembers it, and stores it in a separate div, then never puts it back (yep, the documentation lies in the sense that the element never goes back to where it was)
My experience has been that if you mess with the hidden elements too much after that, you could break future dialog functionality. It's better to just create a new dialog box from new contents (especially if your application has many of these...coding each subform by hand will get tedious very quickly).
If you can't reuse the div's, you'll have to clone them & rename them (which is what I do below)

Upon closing the dialog, the snippet below 'clones' the contents of the dialog, renames its id attribute, then appends the changed contents to a 'sub_form_container', thus generating a brand new dialog/form every time a user closes the dialog. Hope this helps!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
  <link type="text/css" href="ui.css" rel="stylesheet" />  
  <script type="text/javascript" src="j.js"></script>
  <script type="text/javascript" src='ui.js'></script>
  <script type="text/javascript">
    $(document).ready(function() {
                newDialogs(2); 
    });     
    function newDialogs(idCounter) {
      $('#d1').unbind().bind('click', function() {
        $('#d'+ idCounter.toString()).dialog({close: function(event, ui){
            var newSubForm = $('#d'+idCounter.toString()).clone();
                idCounter += 1;
                newSubForm.attr('id', 'd'+idCounter.toString()).attr('class', '').attr('style', '');
            $('#sub_form_container').append(newSubForm);
            newDialogs(idCounter);
            $('ui-dialog').remove()
          }
        });
      });
    }

  </script>

</head>
  <body>
    <h1>Element above</h1>
    <div>
      <div id='d1'>Activate dialog</div>
      <div id='sub_form_container'>
        <div id='d2'>Dialog content <input type='text' /></div>
      </div>
    </div>
    <h1>Element below</h1>
  </body>
</html>

btelles 2009-11-18 03:45:15

ansaurus

tags:

views:

answers:

Using jQuery UI's dialog("destroy") puts element in wrong place?

related questions