Исчезновение, обновление с помощью AJAX, исчезновение в div с использованием Prototype - PullRequest
2 голосов
/ 10 января 2011

У меня есть div, содержимое которого я хочу обновить с помощью AJAX.Чтобы сделать переход плавным, я бы хотел потушить старое содержимое, затем обновить его ответом AJAX, а затем вернуть его обратно.

Моя первая попытка заключается в следующем;но, конечно, AJAX может завершиться до вызова fade(), в результате чего appear() не срабатывает должным образом и конечное состояние исчезает.Как я могу сделать эту работу, как я хочу?

target = $('card_text_' + index);
new Ajax.Request('/games/card_text', 
         {asynchronous:false, 
          evalScripts:true, 
          method:'get', 
          parameters:'type=' + value,
          onCreate: function(){target.fade()},
          onSuccess: function(e){target.update(e.responseText).appear()}
          });

Редактировать: Для полноты я использую Prototype с script.aculo.us

Ответы [ 3 ]

2 голосов
/ 12 января 2011

Я нашел решение, которое хотел, хотя документы не помогли. Оказывается, все эффекты script.aculo.us имеют набор обратных вызовов , включая afterFinish. Мой код стал:

target = $('card_text_' + index);
new Effect.Fade(target, {afterFinish: function(){
  new Ajax.Updater(target, '/games/card_text', 
           {asynchronous:false, 
            evalScripts:true, 
            method:'get', 
            parameters:'type=' + value,           
            onSuccess: function(e){new Effect.Appear(target)}
            });
0 голосов
/ 10 января 2011

Я думаю, что лучший подход - сначала сделать вызов AJAX.Затем, когда это будет сделано, исчезните div.Когда затухание закончено, замените содержимое и верните его обратно.

0 голосов
/ 10 января 2011

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

Таймер можно изменить при вызове функции после обновления и исчезновения.

В обоих случаях это имеет тенденцию заканчиваться в беспорядке.

...