Так как функция danik($) при вызове оказалась undefined, пришлось воспользоваться методами объекта Maximus .read, .think и .apply )) Шутка
Если серьезно то после многочасового ковыряния документации js и mootools у меня получилось корректно навесить дополнительную функцию на нужные ссылки и получить подгрузку флайпейджа товара через AJAX и успешные переходы. Что получилось и как это работает
можно посмотреть здесь уже не посмотреть, переделываю на jquery.
Итак, новый код:
$script = "
window.addEvent('domready', function(){
loading = false;
$$('.accordion a').each(function (el) {
el.addEvent('click', function (e) {
(new Event(e)).preventDefault();
if (loading) return;
var container = $('vmMainPage').getParent();
var onComplete = function(responseText, responseXML){
var titleNode = responseXML.documentElement.getElementsByTagName('title')[0];
var bodyNode = responseXML.documentElement.getElementsByTagName('body')[0];
document.title = titleNode.textContent || titleNode.text;
container.setHTML(bodyNode.textContent || bodyNode.text);
loading = false;
$$('.browseProductTitle a, a.readmore, .browseProductImageContainer a').each(function (el) {
el.addEvent('click', function (e) {
(new Event(e)).preventDefault();
if (loading) return;
var container = $('vmMainPage').getParent();
var onComplete = function(responseText, responseXML){
var titleNode = responseXML.documentElement.getElementsByTagName('title')[0];
var bodyNode = responseXML.documentElement.getElementsByTagName('body')[0];
document.title = titleNode.textContent || titleNode.text;
container.setHTML(bodyNode.textContent || bodyNode.text);
loading = false;
}
container.setStyle('position', 'relative');
container.appendChild(
new Element(
'div',
{
'styles' : {
'height': container.offsetHeight,
'width': container.offsetWidth,
'position': 'absolute',
'top': 0,
'left': 0,
'background': '#f6f6f6',
'opacity': 0.4
}
}
)
);
container.appendChild(
new Element(
'img',
{
'src': '/media/system/images/spinner.gif',
'styles': {
'position': 'absolute',
'top': '50%',
'left': '50%'
}
}
)
);
loading = true;
new Ajax(el.href, {onComplete: onComplete}).request({tmpl: 'xml'});
});
});
}
container.setStyle('position', 'relative');
container.appendChild(
new Element(
'div',
{
'styles' : {
'height': container.offsetHeight,
'width': container.offsetWidth,
'position': 'absolute',
'top': 0,
'left': 0,
'background': '#f6f6f6',
'opacity': 0.4
}
}
)
);
container.appendChild(
new Element(
'img',
{
'src': '/media/system/images/spinner.gif',
'styles': {
'position': 'absolute',
'top': '50%',
'left': '50%'
}
}
)
);
loading = true;
new Ajax(el.href, {onComplete: onComplete}).request({tmpl: 'xml'});
});
});
});
";
JHTML::_('behavior.mootools');
$this->addScriptDeclaration($script);
Он отличается от первоначального тем что мы в функцию onComplete (ее выполняет сервер после завершения ajax-запроса) добавляем почти такой же код, как и основной, чтобы навесить события и обработчик на необходимые ссылки внутри вновь сформированной страницы.
Короче говоря в выборке $$('.browseProductTitle a, a.readmore, .browseProductImageContainer a') как раз указаны
мои селекторы тех самых ссылок, которые открывают флайпейдж товара.
А в запросе $$('.accordion a') как и изначально вы должны указать селектор меню, на которое вы вешаете AJAX.
Вот и фсе. Cпасибо Данику за первоначальную идею и разбросанные подсказки.
ЗЫ: ирония всего в том, что разобравшись в mootools и переделав скрипт, я не смогу его использовать так как компонент "Pro Ajax-поиск по характеристикам товара VirtueMart", который критичен для текущего моего проекта написан на jquery а не mootools (спасибо товарищи-разработчики
). Вообщем пошел я колдовать подгрузку на jquery, удачи всем.
08.08.2014, 11:47:37