Как организовать быстрый просмотр товара через Ajax?

Question

[EVOSandru6]

Добрый день,

Подскажите, как можно совместить modal-dialog от Bootstrap или же Jquery ui dialog с Ajax, чтобы данный загружались в данное модальное окошко при нажатии на ссылку. Например верстка скрытого модального окошка пока не содержит контента, нажимаем на ссылку, получаем код элемента каким то образом, данные POST или GET летят через js в php, получаем ответ, наполняем данные и подгружаем их в верстку модалки либо видим пиктограмму загрузки до полного подгружения. Не хочется в цикле делать скрытые элементы уже наполненных информацией и тяжелыми картинками модалок. Хотелоcь бы сделать через Jquery или Angular. Самый беспкоящий вопрос - это как повесить 2 обработчика на одно событие. Есть ли где нибудь примеры подобной реализации? Не обязательно, но очень здорово, если в yii есть подобный компонент.

Answer 1

[Александр Маджугин]

Вы же описали как это сделать сами. Что конкретно не ясно? Зачем вам два обработчика конкретно в этом случае?

Comments

[EVOSandru6]

1. Как правильнее отправить код (в голову приходит только data)
2. Наверное тут хватит одного. не могу уловить алгоритм: окошко открылось с пиктограммой загрузки (1 действие) -> id улетел в функцию, прилетели данные и подгрузились в окошко(2-е действие) . Т.е. если я хочу достать данные, то как мне не перебить этим открывание окошка.

[Александр Маджугин]

> окошко открылось с пиктограммой загрузки (1 действие) -> id улетел в функцию, прилетели данные и подгрузились в окошко
Ну и отлично. Что вам еще надо-то? Как это помешает открыванию окошка?

Возьмем jquery например:
// показываем окошка и в нем есть какая-нибудь анимированная картинка скажем
$(окошко).fadeIn(400);
// пока оно показывается:
// ваши данные для отправки
var ajax_data = {
val1: 'val4',
}
$.ajax({
type: 'POST',
url: '/страница/запроса.php',
data: ajax_data,
success: function(data) {
// прилетел ответ - заменяем вашу анимашку на то что прилетело
$(вашаАнимашкаВокошке).replaceWith(data);
},
error: function(xhr, str){
alert('Возникла ошибка: ' + xhr.responseCode);
}
});

[EVOSandru6]

Александр Маджугин: Спасибо большое!

Answer 2

[Дмитрий Б]

На сколько помню ни bootstrap modal, ни jquery dialog не поддерживают удалённую загрузку содержимого. В подобной задаче я в итоге выбрал подгружать данные при основной загрузке страницы и выводить обычным способом. В таком случае появился один плюс, при попытке открыть модальное окно, не нужно ждать подрузки.
А в вашем случае я бы создал пустое модальное окно и повесил обработчик на событие создания (jqueryui), в этот момент вруную заполнял бы его через jquery.ajax() например

Comments

[EVOSandru6]

Что значит событие создания (jqueryui) ? Можно примитивный пример?

[Дмитрий Б]

EVOSandru6: api.jqueryui.com/dialog/#event-create

[Дмитрий Б]

api.jqueryui.com/dialog/#event-open

[Дмитрий Б]

Вы можете подписаться на любое событие, которое предоставляется виджетом jQueryUI Dialog. Читайте документацию.
Подписаться, значит попросить jQuery вызвать вашу функцию к примеру при открытии модального окна.
Например:
$( ".selector" ).dialog({
open: function( event, ui ) {
alert('Вы открыли модальное окно, сейчас подгрузится нужный контент');
// Ваш код
}
});

[EVOSandru6]

Дмитрий Байбухтин: Большое спасибо!

[Дмитрий Б]

EVOSandru6: пожалуйста )

[Илья Бондаренко]

Дмитрий Байбухтин Почему modal не поддерживают удаленную загрузку? есть один модальный диалог а весь контент подставляется в него простым append'ом. Это проще и быстрее чем для каждого элемента модальное окно строить.

[Дмитрий Б]

Илья Бондаренко: процитируйте документацию, где написано о поддержке удалённой загрузки содержимого модального окна. Не нашли? Тогда зачем спорите. То, что можно самому это сделать - логично