Как вернуть div и все вложенные в него элементы в первоначальное состояние?
 

Здравствуйте!
Помогите найти хорошее решение. Пишу на jquery ajax приложение. Есть формы для заполнения данными, они обернуты в div. Он сразу есть на странице, просто скрыт (display: none). Внутри его есть самые разные элементы (select, radio, text, checkbox, textarea, div и еще всякие). Когда оператор первый раз кликает по заказу, ему показывается этот блок со всем содержимым в начальном состоянии. Пока оператор заполняет поля, работает js, кое что считает, кое какие поля заполняет сам, создает дополнительные элементы и тд. Оператор нажимает Сохранить, данные улетают на сервер, div с формами опять скрывается, оператору снова доступна таблица для выбора заказа. Если этот div с формами не почистить перед скрытием, то при следующих отображениях он уже частично заполнен старыми данными, в нем уже созданы какие-то элементы, а скрипт умеет работать только с пустым (с первоначальным состоянием), появляются ошибки. Вопрос: как можно сохранить первоначальное состояние этого большого div'а и всех формам и прочих элементов в него вложенных и возвращаться к нему каждый раз, как только форма закрывается? Так сказать, чтобы каждый заказ заполнялся с чистого листа. Сейчас чищу каждое поле по отдельности, но это плохо, так как их уже под сотню и дальше разрабатывать становится тяжело. Перезагружать страницу тоже нельзя, так как это ajax приложение (теряется смысл).
Пробовал в переменную записать .html() этого блока, и при закрытии вставить его обратно, но тогда формы-то восстанавливают первоначальный вид, но сбрасываются все переменные к которым были привязаны DOM элементы, получается такой манипуляцией я создаю как бы такие же но новые DOM элементы и все переменные надо снова переопределять, что тоже плохо и не подходит.
Какие есть варианты?

Поизучай MVC-фреймворки и возьми какой-нибудь на вооружение. Оно не решит проблему очистки персонально, но решит в том числе. Распространенные варианты:

React.js в связке с https://babeljs.io/docs/usage/jsx/
Backbone.js в связке с Marionette.js или Chaplin.js (+, опционально, какой-нибудь http://rivetsjs.com/ для дата-байндинга)
AngularJS. Имхо, дарк сайд - философию JS курочит, хотя весьма удобен.

+ переходи на ES6.

Если это все в форме - у формы есть метод reset()! ;)

более подробно про код внутри div
 

Нет, не в форме. Тег <form> вообще не используется. Там JS всем рулит, через элементы DOM.
Для наглядности:
Код "чистого div'а":
Код после заполнения и отработки всех скриптов:
Как видно и радиобаттоны переставлены и селекты не первоначальные и спрятанные поля отображены и штук 100 новых элементов DOM создано. Вот это все надо как-то по умному почистить и вернуть к "чистому виду" :)

Поэтому нужно использовать MVC-фреймворк. На чистом JS такие вещи не делаются.

Тогда простым ресетом конечно не обойтись... :no:

Запасной вариант!
Иметь некий див-заготовку. Его внутренности просто клонировать в твой див-форму. Причем делать это всякий раз при его открытии. Прибил внутренности у дива-формы, клонировал внутренности из дива-заготовки - вот тебе и девственная форма заказа. ;)

Экий ты пессимист! :D Все бы вам фремворки подавай... :nono:

Что-то не так? Ты поощряешь велосипеды?
Это как раз концепция V в MVC лол.

Чем провинился JS? :cray: Почему вдруг стало невозможным его использование?

Не совсем понял что смешного в этом подходе? То, что его еще кто-от использует? :D
И только поэтому его использовать запрещено? А разрешено только с подключением некоего фреймворка? :blink:

Не будь занудой. Я имел в виду "без сторонних модулей".

Абсолютно ничего смешного. Тот же реакт можно использовать только для V.
Вот только ты предлагаешь велосипедить все самому, когда уже есть готовые решения.

Я еще и зануда... :D Самое главное в споре это обозвать оппонента. :yes:

А ты предлагаешь начать присоединять сторонние фреймворки! :D И это ради нескольких строк кода...

так не работает
 

Может я не правильно понял, но вроде я так пробовал и написал в начале, что не получилось. Делал так:
var tmp = div.html(); //Сохранил в переменную чистый код
программа отработала...
div.html(tmp); //Вставил чистый код на место
Итог: формы чистые, но дальше ничего не работает, так как слетели все ранее определенные переменные, а именно все что было связано с DOM внутри div:
var $ffcDiv = $('#ffcDiv');
var $ffcManagerName = $('#ffcManagerName');
var $ffcClientName = $('#ffcClientName');
и т.д.
Можно, конечно, при чистке их каждый раз переопределять, но если я так подойду к созданию всех необходимых в будущем подобных div'ов, то боюсь получить лагающий портал...

А? Это "обозвал" теперь называется? :blink:
Я что-то не уверен, что на этих нескольких строках дело закончится.
Вот именно поэтому и следует использовать бэкбон/реакт - они за тебя позаботятся, что надо перерисовывать и что нет (реакт особенно).
http://facebook.github.io/react/
https://babeljs.io/docs/usage/jsx/

При клонировании "внутренностей" использование ИД недопустимо. :nono: Т.к. ИД должно быть уникально на странице.

В итоге у тебя должна быть такая структура

<div id='box-form'>
   <!-- тут будет работать пользователь -->
</div>
<div id='box-template'>
   <!-- тут размещаются пустые элементы -->
</div>

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

var $ffcDiv = $('#box-form .ffcDiv');
var $ffcManagerName = $('#box-form .ffcManagerName');
var $ffcClientName = $('#box-form .ffcClientName');

Erolast, делай как знаешь... :D Зануда. :p

Это конечно. Так он у меня был и есть уникальный.
div.html(tmp); - ничего не дублирует. Она совсем удаляет старое содержимое из div и вставляет туда код из переменной. Получается элементы со старыми ИД пропадают, а на их местах новые "пустые" элементы с такими же ИД. Я так понимаю, что с точки зрения DOM это абсолютно другие элементы и, по этому, ранее определенные всякие $ffcClientName = $('#ffcClientName'); слетают. Если определить по новой, то все работает.
И вот вопрос: что с точки зрения производительности лучше, все множество вложенных элементов поштучно вернуть к начальному состоянию или же обнулить html в div'e вышеуказанным способом и переопределить все переменные? Или как-то иначе?
PS: сторонние тяжеленные фреймверки для таких задач использовать не буду, так как очевидно, что даже поштучное восстановление элементов средствами jquery менее затратно по вычислительным ресурсам и объему кода. Я и jquery не хотел применять, но решил, что не осилю все нюансы кросбраузерности средствами голого js, так что пусть будет - спасет от множества недочетов.

Используй делегирование...
http://api.jquery.com/on/