Лучший способ иметь дело с одним и тем же div несколькими местами на странице

Question

У меня есть div, который является довольно большой формой. Возможно 20 полей.

Я использую эту форму для создания нового пользователя и редактирования существующего. У меня есть поиск пользователя, и если вы нажмете на любой результат в списке результатов, он показывает эту форму. Суть в том, что я использую это много раз и в разных местах.

Мои вопросы, какова лучшая стратегия для управления этим?

Моей первой идеей было создать форму и скрыть ее при загрузке страницы. Затем добавьте его туда, где он мне нужен, и покажите. Но потом стало очень сложно, когда я попытался использовать пустой контейнер, содержащий эту форму, так как я бы никогда не смог использовать его снова.

Поэтому я попытался создать глобальную переменную: var MY_FORM = $("#MyForm"); И просто использовать .append(MY_FORM) всякий раз, когда мне это было нужно, но это не сработало.

Затем я подумал об использовании .html() для репликации формы везде, где мне это нужно. Но это становится очень сложным с реплицированными идентификаторами. .button() требует, чтобы я использовал метку, которой нужен атрибут for, основанный на атрибуте идентификатора кнопок, который дублировался бы несколькими экземплярами формы.

Моя последняя мысль состояла в том, чтобы просто создать форму там, где это могло быть необходимо, и просто показать ее, когда настало время.

Как вы видите, я довольно противоречив, и у меня болит голова, и все еще 8 часов утра. где я ...: - (

Любая помощь очень ценится, спасибо!

P.S. если вы можете придумать лучший заголовок, смело меняйте его.

Answer 1

Ваше решение с глобальной переменной и методом добавления должно работать (, если реализовано правильно )

Проверьте демонстрацию на http://jsfiddle.net/gaby/aCnuR/

пример 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>

пример jquery

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

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

---

ОБНОВЛЕНИЕ
( с анимацией и без использования отсоединения, так как это не требуется .. )

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

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

демо : http://jsfiddle.net/gaby/aCnuR/6/

Answer 2

Использовать jQuery.tmpl() плагин

Я использую такой сценарий все время. Я загружаю свою редактор форму как шаблон с переменными заполнителями и использую ее для создания новых экземпляров сущностей, а также для редактирования существующих.

Я не показываю / не скрываю это, хотя это будет работать быстрее. Но я должен признать, что у меня не было проблем, связанных со скоростью создания DOM и т. Д. Я не наблюдал этого и пользователи не сообщали об этом ...

Answer 3

Но потом стало очень сложно, когда я попытался использовать пустой контейнер, содержащий эту форму, так как я бы никогда не смог использовать его снова.

Не делай этого тогда? Раньше я с успехом использовал единственный скрытый div.

.button () требует, чтобы я использовал метку, которой нужен атрибут for, который опирается на атрибут id кнопок

Как .button () требует метки? Вы можете объяснить?

Answer 4

Один из ваших примеров должен сработать.

// 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');

Если это не сработает, опубликуйте несколько примеров кода из проекта.

Aпримечание по дублирующимся идентификаторам: Вы упоминаете, что не можете дублировать идентификаторы, потому что это мешает пользовательскому интерфейсу jQuery правильно подключить виджет кнопки.На самом деле, дубликат идентификатора может вызвать проблемы с javascript по всему документу ;это делает документ недействительным.Если приведенный выше пример не работает, убедитесь, что у вас нет дублированных идентификаторов.

ОБНОВЛЕНИЕ

Вот рабочий пример того, как достичь вашей цели: http://jsfiddle.net/ZqpYC/

ОБНОВЛЕНИЕ

Вот это с анимацией: http://jsfiddle.net/ZqpYC/1/