The best way to deal with the same section on a page

Question

I have a div, which is a pretty big form. Maybe 20 fields.

I use this form to create a new user and edit an existing one. I have a user search, and if you click on any result in the result list, it will display this form. Point, I use it a lot and in several places.

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

My first idea was to create a form and hide it when the page loads. Then add it to where I need it and show it. But then it became very difficult when I tried to use an empty container containing this form, since I would never be able to use it again.

So, I tried to create a global variable: var MY_FORM = $("#MyForm"); And just use .append(MY_FORM) whenever I need it, but that didn't work.

Then I thought about using .html() to replicate the form, wherever I needed. But it is very difficult with replicated identifiers. .button() requires me to use a label that needs the a attribute, which depends on the button id attribute, which will be duplicated by multiple instances of the form.

My last thought was to simply create the form where it might be needed, and just show it when the time came.

As you can see, I am in a lot of conflict, and my head hurts, and still 8 AM where I am ...: - (

Any help is much appreciated, thanks!

PS if you can think of a better title, feel free to change it.

Answer 1

Your solution with a global variable and append should work (if done correctly)

Check out the demo version of 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 without using detachment, as this is not 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 script all the time. I load the editor form as a template with variable placeholders and use it to create new instances of entities, as well as to edit existing ones.

I do not show / hide it, even if it will work faster. But I must admit that I had no problems with the speed of creating the DOM, etc. I also did not observe this, and users did not report it ...

Answer 3

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, send some code samples from the project.

Note about duplicate identifiers:. You mention that you cannot duplicate the identifier because it does not allow the jQuery user interface to connect properly. In fact, a duplicate identifier can cause javascript problems throughout the document; this makes the document invalid. If the above example does not work, make sure that it does not have a duplicate identifier.

UPDATE

Here is an example of how to achieve your goal: http://jsfiddle.net/ZqpYC/

UPDATE

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

Answer 4

But then it became very difficult when I tried to use an empty container containing this form, since I would never be able to use it again.

Is not it? I used the only hidden div with good success before.

.button () requires me to use a label that needs an a attribute that uses the id attribute of buttons

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