Best way to deal with the same div multiple places on the page

I have a div that is a rather large form. Maybe 20 fields.

I use this form for creating a new user and editing an existing one. I have a user search and if you click on any result in the result list it shows this form. Point being, i use it a lot, and in mul开发者_高级运维tiple places.

My questions is what is the best strategy to manage this?

My first idea was to create the form and hide it when the page loaded. Then append it to where I needed it and show it. But then it got very complicated when I tried to use empty on the container that contained this form, as I would them never be able to use it again.

So I tried creating a global variable: var MY_FORM = $("#MyForm"); And just use .append(MY_FORM) whenever I needed it, but this did not work.

I then thought about using .html() to replicate the form wherever I needed it. But this gets very complicated with replicated ids. .button() requires that I use a label which needs a for attribute that relies on the buttons id attribute which would be duplicated with multiple instances of the form.

My latest thought was to just create the form wherever it could possibly be needed and just show it when the time was right.

As you can see I'm quite conflicted and my head hurts and it's still 8 A.M. where I am... :-(

Any help is greatly appreciated, Thanks!

P.S. if you can think of a better title feel free to change it.

Your solution with the global variable and the append method should work (if implemented correctly)

Check a demo at http://jsfiddle.net/gaby/aCnuR/

example html

<div id="place1" class="formplacer">
    <button class="getform">Bring form here</button>
</div>
<div id="place2" class="formplacer">
    <button class="getform">Bring form here</button>
</div>
<div id="place3" class="formplacer">
    <button class="getform">Bring form here</button>
</div>

<form id="multiform">
    input
    <input type="text" name="field1" />
    <input type="submit" name="submit" value="sumbit" />
</form>

example jquery

var myform = $('#multiform').detach();

$('.getform').click(function(){
    $(this).closest('.formplacer').append(myform);
});

UPDATE
(with animation and not using detach as it is not really required..)

var myform = $('#multiform').hide(0);

$('.getform').click(function(){
    var base = this;
    myform.slideUp('slow', function(){
        $(base).closest('.formplacer').append(myform.slideDown('slow'));
    });
});

demo: http://jsfiddle.net/gaby/aCnuR/6/

Use jQuery.tmpl() plugin

I use this kind of scenario all the time. I'm loading my editor form as a template with variable placeholders and use it for creating new entity instances as well as for editing existing ones.

I don't show/hide it even though it would work faster. But I have to admit I had no issues related to DOM creation speed etc. Nor have I observed it, nor have users reported it...

But then it got very complicated when I tried to use empty on the container that contained this form, as I would them never be able to use it again.

Don't do that then? I've used the single hidden div with good success before.

.button() requires that I use a label which needs a for attribute that relies on the buttons id attribute

How does .button() require a label? Can you explain?

One of your examples should have worked.

// Showing the form where you need it.
var the_form = $("#MyForm");
$('#container').append(the_form.css('display', 'block'));

// hiding the form
the_form.css('display', 'none');

If this does not work, post some code samples from the project.

A note on Duplicate ID's: You mention not being able to duplicate ID's because it stops jQuery UI from properly attaching a button widget. As a matter of fact, a duplicate ID can cause problems with javascript all over the document; it makes the document invalid. If the above example doesn't work, make sure you have no duplicated ID's anywhere.

UPDATE

Here is a working example of how to accomplish your goal: http://jsfiddle.net/ZqpYC/

UPDATE

Here it is with animation: http://jsfiddle.net/ZqpYC/1/