Using jQuery UI's dialog("destroy") puts element in wrong place?
I have a big form with many parts. For each part, I want to add a small button "Popup as Dialog" which will convert that part to a dialog on-demand, and then (when closing the dialog) to return back to the form with the new inputs.
I am using jQuery UI's dialog() function. The pop-up parts works fine - the sub-form converts into a dialog. However, when I dialog("destroy") the sub-form, the element appears back, but at the end of the DOM document instead of the original location.
Is this a "feature" of dialog()? Anything to do about that? Is there a better way to d开发者_JS百科o this w/o using dialog()?
This worked for me:
- Clone the dialog
- Initialize the cloned dialog (so the original stays on the page)
- Remove the cloned dialog when I'm done with it
Code sample:
$('a.popup-modal').click(function(e){
var $modal = $(this).closest('form').find('.modal').clone();
$modal.dialog({
autoOpen: true,
close: function(event, ui){
$(this).remove();
}
});
});
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">
<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>
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/
加载中,请稍侯......
精彩评论