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

Question

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 multiple 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.

Answer 1

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/

Answer 2

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...