Правильный AJAX в компоненте Joomla

  • Воскресенье, 08 июня 2014

Я разрабатываю компонент медиагалереи. Чтобы плеер играл без прерываний на загрузку страницы при просмотре галереи, я применил AJAX для загрузки страниц компонента, а плеер вынес в модуль. Все оказалось просто, но выявился неприятный факт — история серфинга по компоненту не запоминается в браузере и клик по кнопке "назад" приводит к вылету из компонента на предшествующую компоненту страницу. Как это исправить читайте под катом.

Для того, чтобы исправить этот недочет мне пришлось написать хитрый JavaScript, который изменяет URL страницы без ее перезагрузки, и навесить на страницу обработчик, отслеживающий изменение URL и подгружающий новое содержимое, соответствующее новому URL:

jQuery(window).on('load', function(e) {
    setInterval(check_anchor, 300);
});

Этот обработчик регулярно, с интервалом в 0,3 секунды, запускает функцию check_anchor(), которая отслеживает изменение URL и подгружает соответствующее содержимое:

var current_anchor = document.location.href;

function check_anchor()
{
    var new_anchor = document.location.href;
    if (current_anchor != new_anchor)
    {
        current_anchor = new_anchor;
        ShowLoadingScreen()
        jQuery.ajax({
            url: new_anchor + '&tmpl=component&layout=ajax',
            dataType: "html",
            type: "post",
            success: function (data)
            {
                HideLoadingScreen();
                if(data != '')
                {
                    jQuery('#argensMediaContent').html(data);
                }

            }
        });
    }
}

За то, чтобы изменение URL не приводило к перезагрузке страницы и записывалось в историю браузера отвечает функция setLocation()

function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return;
    } catch(e) {}
    location.hash = '#' + curLoc;
}

 которую запускает обработчик, навешанный на событие клика по ссылке

jQuery(document).ready(function()
{
    jQuery("a.ajaxUrl").click(function()
    {
        var url = jQuery(this).attr('href');
        setLocation(url);
        return false;
    });
});

Ну вот и все премудрости. Проверено в последних версиях Internet Explorer, Firefox, Chrome, Opera.

Демо находится здесь. Если проверите в других версиях браузеров, буду премного благодарен.

Аркадий Седельников

Аркадий Седельников

Россия, Новосибирск. http://argens.ru/

Статьи автора

Joomla!® CMS — пожалуй, лучшая система управления контентом с открытым исходным кодом

Логотип Joomla

Joomla! — это больше, чем просто программное обеспечение, это люди, включающие разработчиков, дизайнеров, системных администраторов, переводчиков, копирайтеров, и, что самое главное — простых пользователей.

Мы рады пригласить вас в ряды нашего сообщества!

Свернуть

Коротко о главном в Joomla

Новости портала

Новое в блогах

Видео

Форум о Joomla