Представим стандартный интернет-магазин или сайт-каталог: маленькие блоки с краткой информацией о продукте, при клике на который появляется всплывающий блок с более подробной информацией. Реализовал я такую штуку с помощью аякса: в маленьком блоке, в скрытом поле, храню id товара, при клике на этот блок беру этот id, отправляю ajax-запрос на сервер, получаю всю необходимую информацию, отправляю в виде JSON клиенту и полученный JSON вставляю во всплывающий блок. Вот код -
jsfiddle.net/f7ppy , тут находится аякс-обработчик и разметка шаблона, в который я вставляю полученные данные.
Проблема заключается в том, что всплывающее окно появляется ~ на полсекунды раньше, чем мой шаблон заполнится данным. Как это выглядит: я кликаю на какой-то блок, всплывает блок с подробной информацией об этом товаре, далее я быстро закрываю его и кликаю на другой - всплывает блок, где я успеваю заметить, как старая информация о предыдущем товаре меняется на новую. Грешу на callback-функцию в $.get, можно ли как-то реализовать её более грамотно? Может быть вообще сформировать этот блок с помощью одной функции html(), без этих многочисленных вставок (но хочется разделения кода)? В чем еще может быть проблема?