Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.03.2014, 09:56
Новичок на форуме
Отправить личное сообщение для vychmat Посмотреть профиль Найти все сообщения от vychmat
 
Регистрация: 20.03.2014
Сообщений: 3

Блокирование интерфейса. Добавление нового элемента
Добрый день!

Суть проблемы: есть некий интерфейс, по нажатию определенной кнопки происходит добавление новых полей и полный ререндеринг всех элементов. Поскольку элементов на вкладке очень много, этот процесс занимает продолжительное время. Это не правильно и в ближайшее время будет переделано, но речь сейчас не об этом.
Необходимо сделать блокировку интерфейса на время, пока происходит перестроение страницы: стандартный прозрачный блок поверх страницы с "Пожалуйста, подождите".
Как я пробовал это реализовать:
1. jquery-плагин $.blockUi();
2. Добавление блокируещего div'a на страницу и show() его, когда необходимо.
3. Создание div'a в скрипте и $("body").append() его, когда необходимо.

Проблема в том, что блокировка, в любом случае, срабатывает после ререндеринга. То есть, по нажатию кнопки запускается функция, которая добавляет блокирующий div на страницу, а затем запускает добавление элементов и ререндеринг вкладки, а в результате по нажатию кнопки интерфейс зависает (ререндеринг), потом появляются новые элементы, а потом срабатывает уже никому не нужная блокировка.

Может кто-нибудь подсказать, с чем это связано и как его бороть?
Ответить с цитированием
  #2 (permalink)  
Старый 20.03.2014, 10:09
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

То есть как, в коде сначала блокировка, а потом рендеринг, а срабатывает все наоборот?
Ответить с цитированием
  #3 (permalink)  
Старый 20.03.2014, 10:25
Новичок на форуме
Отправить личное сообщение для vychmat Посмотреть профиль Найти все сообщения от vychmat
 
Регистрация: 20.03.2014
Сообщений: 3

Именно.
В коде:

var that = this;
        $('#attributes-tab').on('click', '#' + buttonId, function (event) {
            that.testPreloader(event);
        });

...
testPreloader: function (event) {
        var preloader = this.createPreloader(); // в createPreloader создаем нужный div
        $("body").append(preloader); // либо запуск $('#preloader').show(); если элемент preloader уже на странице
        this.cloneAttributeGroup(event); // толстая функция с ререндерингом, которая вешает интерфейс
    },


И по факту блокировка появляется тогда, когда все уже отработало.
Ответить с цитированием
  #4 (permalink)  
Старый 20.03.2014, 11:09
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

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

Либо после "добавления блокирующего дива" принудительно заставьте перерисоваться вью - один из методов запросить offset любой , допустим:

var preloader = this.createPreloader(); 
$("body").append(preloader);
document.body.offsetWidth;
this.cloneAttributeGroup(event);


, либо дать самостоятельно обновиться:

var preloader = this.createPreloader(); 
$("body").append(preloader);
var that = this;
setTimeout(function(){
    that.cloneAttributeGroup(event);
}, 0);

Последний раз редактировалось dmitriymar, 20.03.2014 в 11:14.
Ответить с цитированием
  #5 (permalink)  
Старый 20.03.2014, 12:56
Новичок на форуме
Отправить личное сообщение для vychmat Посмотреть профиль Найти все сообщения от vychmat
 
Регистрация: 20.03.2014
Сообщений: 3

С таймаутом сработало как надо!
Большое спасибо!
Ответить с цитированием
  #6 (permalink)  
Старый 20.03.2014, 13:04
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,550

Польза от documentFragment
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создание программно нового элемента в Sortable Novozar2 jQuery 2 06.03.2014 13:47
Ext.tree, динам. добавление элемента Margarita ExtJS 0 24.12.2012 13:00
добавление дочернего элемента stalker77 Общие вопросы Javascript 5 31.08.2011 20:58
Добавление нового элемента в документ htaccess Оффтопик 7 22.06.2010 22:49
Добавление элемента и работа с ним nvbn Events/DOM/Window 13 07.07.2008 18:07