Показать сообщение отдельно
  #1 (permalink)  
Старый 24.12.2011, 13:30
Интересующийся
Отправить личное сообщение для =VNK= Посмотреть профиль Найти все сообщения от =VNK=
 
Регистрация: 23.12.2011
Сообщений: 13

Обработчик событий для всплывающего окна
Добрый день!

Имеется некоторая страница со списком товаров. Для добавления товара в корзину необходимо перейти на страницу описания товара, с которой уже можно добавить товар в корзину. Все реализовано и работает. Сейчас для удобства пользователей необходимо реализовать возможность добавления товара в корзину со страницы со списком товаров. В кратком описании к каждому товару должна быть кнопка "добавить в корзину".

Реализовать это необходимо с помощью всплывающего окна. Пользователь нажимает на кнопку "добавить в корзину", всплывает окно с формой заказа, в котором можно выбрать различные параметры и количество товара, после чего добавить в корзину кликом по кнопке в окне.

Всплывающее окно реализовано с помощью плагина fancybox. Формы заказа в исходном коде загружаемой страницы нет, так как для различных товаров формы отличаются и грузить все формы нет никакого смысла. Соответствующая форма подгружается с помощью AJAX в всплывающее окно.

При загрузке страницы в консоли Chrome получаю ошибку: Uncaught TypeError: Object [object Object] has no method 'addEvent'. Если загрузить форму не во всплывающем окне, а напрямую, подключив все скрипты, все отрабатывает отлично.

На главной странице, где необходимо реализовать всплывающее окно, подключаются библиотеки, скрипты и плагин fancybox. Пока имеющийся код, написанный с применением mootools не менял. Позже планирую все переписать на Jquery. Код скрипта, обрабатывающий событие:
var orderForm;

window.addEvent('domready', function (){
	orderForm = $('orderForm');
	
	orderForm.addEvent('submit', onOrderFormSubmit);
});
function onOrderFormSubmit (e)
{
	e.stop();
	
	var id       = orderForm.itemId.value;
	var num      = orderForm.orderNum.value;
		
	var request = new AjaxRequest({
		'url': '/order/add',
		'method': 'post',
		'encoding': 'utf-8',
		onSuccess: function ()
		{
			loadBasketData();
		}
	});
		
	var query = 'id='+id+'&num='+num;
	
	request.send(query);
}


Код формы, подгружаемой в всплывающем окне:
<form id="orderForm" action="/order/add"> 
    <input type="text" name="orderNum" id="addToBasketNum" class="num" value="1" size="2"/> шт.
    <input type="hidden" name="itemId" value="132" />
    <input type="image" id="orderFormSubmit" src="img/add_basket.png" alt="В корзину" />
</form>

В JS пока не силен, пишу на php, но возникла необходимость доработать. Прошу помочь в определении ошибки и советом в реализации данного функционала.

Последний раз редактировалось =VNK=, 24.12.2011 в 17:54.
Ответить с цитированием