Добавление раздувания DOM при отображении флэш-сообщения

Question

В моем приложении Rails, когда пользователь сохраняет, он использует Ajax для сохранения сообщения, а затем выполняет файл update.js.erb. В этом файле у меня есть некоторые JQuery:

$('body').append('<div class="message">Saved</div>'); 

Потому что у меня это таким образом, каждый раз, когда пользователь сохраняет, добавляет более <div class="message">Saved</div> в организме. Есть ли способ остановить это или это не имеет значения?

Answer 1

Ленивый (но простой) метод должен был бы очистить другие сообщения, прежде чем показывать свой новый:

$('.message').remove(); 
$('body').append('<div class="message">Saved</div>'); 

Answer 2

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

Во-вторых, у вас есть несколько вариантов, только когда-либо один из них в DOM:

1. После показа его пользователю, а затем удалить его из DOM (возможно, по таймеру).
2. Имейте одно сообщение и показывайте/скрывайте его при необходимости (это, вероятно, самый простой).
3. Посмотрите, есть ли файл на этой странице и его можно использовать повторно.

Например, чтобы найти предыдущий объект сообщения (который начинается скрытый) и показать его в течение короткого периода времени, вы могли бы использовать это:

$(".message").html("Saved").show().delay(2000).fadeOut(1000); 

Если вы использовали это, вы бы просто поставьте объект сообщения на своей странице один раз для начала, либо на исходной странице HTML, либо просто добавьте его один раз в код запуска страницы. Затем добавьте CSS, который по умолчанию будет скрыт, поэтому он показывается только тогда, когда вы этого хотите.

Или, если вы используете переход CSS3 на основе имени класса, вы можете просто использовать jQuery addClass() и removeClass().