Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.02.2015, 11:26
Интересующийся
Отправить личное сообщение для lucky89 Посмотреть профиль Найти все сообщения от lucky89
 
Регистрация: 27.10.2014
Сообщений: 16

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

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

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

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

Последний раз редактировалось Erolast, 25.02.2015 в 12:16.
Ответить с цитированием
  #3 (permalink)  
Старый 25.02.2015, 12:44
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,350

Сообщение от lucky89
Внутри его есть самые разные элементы (select, radio, text, checkbox, textarea, div и еще всякие).
...
Вопрос: как можно сохранить первоначальное состояние этого большого div'а и всех формам и прочих элементов в него вложенных и возвращаться к нему каждый раз, как только форма закрывается?
Если это все в форме - у формы есть метод reset()!
Ответить с цитированием
  #4 (permalink)  
Старый 25.02.2015, 13:58
Интересующийся
Отправить личное сообщение для lucky89 Посмотреть профиль Найти все сообщения от lucky89
 
Регистрация: 27.10.2014
Сообщений: 16

более подробно про код внутри div
Сообщение от ksa Посмотреть сообщение
Если это все в форме - у формы есть метод reset()!
Нет, не в форме. Тег <form> вообще не используется. Там JS всем рулит, через элементы DOM.
Для наглядности:
Код "чистого div'а":
Код:
<div id="ffcDiv" class="form dn">

    <div class="divTitle">Менеджер:</div>
    <div id="ffcManagerName" class="divString">E-mail менеджера</div>
    <input id="ffcClientName" class="inputStringLong" name="clientName" type="text" placeholder="ФИО"/><br/>
    <input id="ffcClientAddress" class="inputStringLong" type="text" placeholder="Адрес"/><br/>
    <div id="ffcPostIndex" class="divString">Почтовый индекс (появится сам)</div>
    <input id="ffcClientPhone1" class="inputStringWithBtn" type="text" placeholder="Телефон"/>
    <button id="ffcBtnCall1" class="inputStringBtn" type="button">▶</button><br/>
    <input id="ffcClientPhone2" class="inputStringWithBtn" type="text" placeholder="Дополнительный телефон (только цифры)"/>
    <button id="ffcBtnCall2" class="inputStringBtn" type="button">▶</button><br/>
    <div class="divTitle">Комментарии к звонку (если были):</div>
    <div id="ffcCallCommentBlock"></div>
    <select id="ffcCallResult" class="inputStringLong"></select><br/>
    <textarea id="ffcCallComment" class="commentBlock" placeholder="Комментарий к звонку"></textarea>
    <div class="divTitle">Доставка:</div>
    <div id="ffcDelivery" class="divBlock">
        <div id="ffcDeliveryLeft" class="ffcDeliveryLeft">
            <input id="ffcBtnPost" name="delivery" value="post" type="radio" checked/>Почта<br/>
            <input id="ffcBtnCourier" name="delivery" value="courier" type="radio"/>Курьер<br/>
            <input id="ffcBtnPickup" name="delivery" value="pickup" type="radio"/>Самовывоз<br/>
        </div>
        <div id="ffcDeliveryPrice" class="ffcDeliveryPrice">400</div>
        <div style=" width:100%; height:1px; clear:both;"></div>
    </div>

    <div id="ffcCourierDiv" class="divBlock dn">
        <div id="ffcCourierCity">Город клиента (заполняется автоматически)</div>
        <input id="ffcCourierMetro" class="inputStringWithBtn dn" type="text" placeholder="Станция метро"/>
        <input id="ffcCourierDate" type="date" /><br />
        <select id="ffcCourierTime">
            <option value="10:00 - 15:00">10:00 - 15:00</option>
            <option value="10:00 - 18:00">10:00 - 18:00</option>
            <option value="10:00 - 22:00">10:00 - 22:00</option>
            <option value="15:00 - 20:00">15:00 - 20:00</option>
            <option value="18:00 - 22:00">18:00 - 22:00</option>
        </select>
    </div>

    <div id="ffcPickupDiv" class="divBlock dn">
        Рязанский проспект 52А<br/>
        Метро- Рязанский Проспект<br/>
        С понедельника по пятницу с 11:00 до 21:00<br/>
        В субботу с 12:00 до 17:00<br/>
        Воскресенье – выходной<br/>
        <input id="ffcPickupDate" type="date"/><br />
        <select id="ffcPickupTime">
            <option value="10:00 - 15:00">10:00 - 15:00</option>
            <option value="10:00 - 18:00">10:00 - 18:00</option>
            <option value="10:00 - 22:00">10:00 - 22:00</option>
            <option value="15:00 - 20:00">15:00 - 20:00</option>
            <option value="18:00 - 22:00">18:00 - 22:00</option>
        </select>
    </div>

    <!--Сюда скрипт вставит список групп товаров и блоки с товарами-->
    <div id="ffcGood">
        <select id="ffcGoodFamily" class="inputStringLong"></select>
    </div>

    <input id="ffcSale" class="inputStringLong" type="text" placeholder="Скидка (целое число)"/><br/>
    <b>Итого:</b>&#160&#160<input id="ffcBtnCalculatePrice" type="button" value="Посчитать"/>
    <div id="ffcTotalPrise" class="divString">Пока считается по кнопке "Посчитать"</div>
    <input id="ffcBtnSave" type="button" value="Сохранить"/>
    <input id="ffcBtnCancel" type="button" value="Отмена"/>

</div>
Код после заполнения и отработки всех скриптов:
Код:
<div id="ffcDiv" class="form dn" style="display: block;">

    <div class="divTitle">Менеджер:</div>
    <div id="ffcManagerName" class="divString">CallCenter_01</div>
    <input id="ffcClientName" class="inputStringLong suggestions-input" name="clientName" type="text" placeholder="ФИО" autocomplete="off" style="box-sizing: border-box; padding-right: 1px;"><div class="suggestions-wrapper"><div class="suggestions-suggestions" style="position: absolute; left: -499px; top: 20px; width: 499px; display: none;"></div><span class="suggestions-addon" data-addon-type="spinner" style="left: -20px; top: 2px; height: 18px; width: 18px; display: none; opacity: 0;"></span><ul class="suggestions-constraints" style="left: -496px; top: 11px;"></ul></div><br>
    <input id="ffcClientAddress" class="inputStringLong suggestions-input" type="text" placeholder="Адрес" autocomplete="off" style="box-sizing: border-box; padding-right: 1px;"><div class="suggestions-wrapper"><div class="suggestions-suggestions" style="position: absolute; left: -499px; top: 20px; width: 499px; display: none;"></div><span class="suggestions-addon" data-addon-type="spinner" style="left: -20px; top: 2px; height: 18px; width: 18px; display: none; opacity: 0;"></span><ul class="suggestions-constraints" style="left: -496px; top: 11px;"></ul></div><br>
    <div id="ffcPostIndex" class="divString">633454</div>
    <input id="ffcClientPhone1" class="inputStringWithBtn" type="text" placeholder="Телефон">
    <button id="ffcBtnCall1" class="inputStringBtn" type="button">▶</button><br>
    <input id="ffcClientPhone2" class="inputStringWithBtn" type="text" placeholder="Дополнительный телефон (только цифры)">
    <button id="ffcBtnCall2" class="inputStringBtn" type="button">▶</button><br>
    <div class="divTitle">Комментарии к звонку (если были):</div>
    <div id="ffcCallCommentBlock">Пока нет ни одного комментария</div>
    <select id="ffcCallResult" class="inputStringLong"><option value="-1">Результат звонка</option><option value="10">Подтвержден</option><option value="30">Перезвонить в ...</option><option value="31">Недозвон: занято</option><option 

... Все не влезло кусок убрал ...

    <div id="ffcPickupDiv" class="divBlock dn" style="display: none;">
        Рязанский проспект 52А<br>
        Метро- Рязанский Проспект<br>
        С понедельника по пятницу с 11:00 до 21:00<br>
        В субботу с 12:00 до 17:00<br>
        Воскресенье – выходной<br>
        <input id="ffcPickupDate" type="date"><br>
        <select id="ffcPickupTime">
            <option value="10:00 - 15:00">10:00 - 15:00</option>
            <option value="10:00 - 18:00">10:00 - 18:00</option>
            <option value="10:00 - 22:00">10:00 - 22:00</option>
            <option value="15:00 - 20:00">15:00 - 20:00</option>
            <option value="18:00 - 22:00">18:00 - 22:00</option>
        </select>
    </div>

    <!--Сюда скрипт вставит список групп товаров и блоки с товарами-->
    <div id="ffcGood">
        <select id="ffcGoodFamily" class="inputStringLong"><option value="Desire_Pheromone">Desire_Pheromone</option><option value="Valgus_Pro">Valgus_Pro</option></select>
    <div id="Desire_Pheromone" class="divBlock" style="display: block;"><input type="checkbox" name="Desire_Pheromone" value="Desire_Pheromone_5_ml_990" goodid="0"><span>5 мл цена 990<br></span><input type="checkbox" name="Desire_Pheromone" value="Desire_Pheromone_10_ml_1290" goodid="1"><span>10 мл цена 1290<br></span><input type="checkbox" name="Desire_Pheromone" value="Desire_Pheromone_10_ml_2970" goodid="2"><span>10 мл цена 2970<br></span><input type="checkbox" name="Desire_Pheromone" value="Desire_Pheromone_20_ml_3960" goodid="3"><span>20 мл цена 3960<br></span><input type="checkbox" name="Desire_Pheromone" value="Desire_Pheromone_5_+_5_ml_1980" goodid="4"><span>5 + 5 мл цена 1980<br></span></div><div id="Valgus_Pro" class="divBlock" style="display: none;"><input type="checkbox" name="Valgus_Pro" value="Valgus_Pro_1_pcs_990" goodid="0"><span>1 шт цена 990<br></span><input type="checkbox" name="Valgus_Pro" value="Valgus_Pro_2_pcs_1980" goodid="1"><span>2 шт цена 1980<br></span><input type="checkbox" name="Valgus_Pro" value="Valgus_Pro_3_pcs_2780" goodid="2"><span>3 шт цена 2780<br></span><input type="checkbox" name="Valgus_Pro" value="Valgus_Pro_4_pcs_3580" goodid="3"><span>4 шт цена 3580<br></span></div></div>

    <input id="ffcSale" class="inputStringLong" type="text" placeholder="Скидка (целое число)"><br>
    <b>Итого:</b>&nbsp;&nbsp;<input id="ffcBtnCalculatePrice" type="button" value="Посчитать">
    <div id="ffcTotalPrise" class="divString">1290 + 300 - 120 = 1470</div>
    <input id="ffcBtnSave" type="button" value="Сохранить">
    <input id="ffcBtnCancel" type="button" value="Отмена">

</div>
Как видно и радиобаттоны переставлены и селекты не первоначальные и спрятанные поля отображены и штук 100 новых элементов DOM создано. Вот это все надо как-то по умному почистить и вернуть к "чистому виду"
Ответить с цитированием
  #5 (permalink)  
Старый 25.02.2015, 14:01
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,435

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

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

+ переходи на ES6.
Ответить с цитированием
  #6 (permalink)  
Старый 25.02.2015, 14:03
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,350

Сообщение от lucky89
и штук 100 новых элементов DOM создано
Тогда простым ресетом конечно не обойтись...

Запасной вариант!
Иметь некий див-заготовку. Его внутренности просто клонировать в твой див-форму. Причем делать это всякий раз при его открытии. Прибил внутренности у дива-формы, клонировал внутренности из дива-заготовки - вот тебе и девственная форма заказа.
Ответить с цитированием
  #7 (permalink)  
Старый 25.02.2015, 14:03
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,350

Сообщение от Erolast
На чистом JS такие вещи не делаются.
Экий ты пессимист! Все бы вам фремворки подавай...
Ответить с цитированием
  #8 (permalink)  
Старый 25.02.2015, 14:05
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,435

Что-то не так? Ты поощряешь велосипеды?
Цитата:
Иметь некий див-заготовку. Его внутренности просто клонировать в твой див-форму. Причем делать это всякий раз при его открытии. Прибил внутренности у дива-формы, клонировал внутренности из дива-заготовки - вот тебе и девственная форма заказа.
Это как раз концепция V в MVC лол.
Ответить с цитированием
  #9 (permalink)  
Старый 25.02.2015, 14:09
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,350

Сообщение от Erolast
Что-то не так?
Чем провинился JS? Почему вдруг стало невозможным его использование?
Ответить с цитированием
  #10 (permalink)  
Старый 25.02.2015, 14:11
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,350

Сообщение от Erolast
Это как раз концепция V в MVC лол.
Не совсем понял что смешного в этом подходе? То, что его еще кто-от использует?
И только поэтому его использовать запрещено? А разрешено только с подключением некоего фреймворка?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как удалить из HTML все элементы со стилем hidden Почемучкин Events/DOM/Window 3 24.06.2011 13:40
Название ячейки таблицы Questioner Общие вопросы Javascript 6 16.02.2011 08:58
как удалить все элементы в Div e ? Arfey Общие вопросы Javascript 14 10.06.2010 10:50
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 13:37
Как удалить все пустые элементы UL smashercosmo Events/DOM/Window 13 25.02.2009 08:03