Адрес Государство путаницы - PullRequest
Новая
       21

Адрес Государство путаницы

4 голосов
/ 10 марта 2011

Я создал простую страницу с глубокими ссылками, используя адрес Jquery и следуя этому примеру:
http://www.asual.com/jquery/address/samples/state/

Теперь в этом примере браузер HTML5 (я использую Chrome 10) показывает фактический отображаемый источник. То есть http://www.asual.com/jquery/address/samples/state/portfolio показывает Portfolio content. в content div, даже если этот контент был вставлен через адрес Jquery / Ajax / $('.content').html(). Я перестроил этот пример, но на моей странице источником всегда является исходная страница, до того как был выполнен любой Ajax. Это то же поведение, что и в браузере, отличном от HTML5.
Что я делаю не так?
Спасибо за подсказки,
томас

редактирование:

Вот демонстрационный код: 

<script type="text/javascript"> 

        $.address.init(function() {

            // Initializes the plugin
            $('.nav a').address();

        }).change(function(event) {

            // Selects the proper navigation link
            $('.nav a').each(function() {
                if ($(this).attr('href') == ($.address.state() + event.path)) {
                    $(this).addClass('selected').focus();
                } else {
                    $(this).removeClass('selected');
                }
            });

            // Handles response
            var handler = function(data) {
                $('.content').html($('.content', data).html()).show();
                $.address.title(/>([^<]*)<\/title/.exec(data)[1]);
            };

            // Loads the page content and inserts it into the content area
            $.ajax({
                url: $.address.state() + event.path,
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    handler(XMLHttpRequest.responseText);
                },
                success: function(data, textStatus, XMLHttpRequest) {
                    handler(data);
                }
            });
        });

        // Hides the tabs during initialization
        document.write('<style type="text/css"> .content { display: none; } </style>');

    </script>

Мой в значительной степени идентичен. Я удалил подсветку ссылки, изменил URL-адреса, чтобы они соответствовали моему сайту, и изменил вызов Ajax, так как я загружаю HTML. Интересно, есть ли что-то еще (например, необходимый .htaccess, о котором документация на самом деле не говорит, но который я нашел в GitHub проекта).

Вот мой код: 

$.address.init(function(event) {
        $('#blogMenu a').address();
        $('#blogBottomMenu a').address();
        $('.linkleiste a').address();
}).change(function(event) {
        var value = $.address.state().replace(/^\/$/, '') + event.value;
  value = value.replace(/^\/blog\//,'');
  value = value.replace(/_/,'');
        var teile = value.split('/');
        var name = '';
        var thema = '';
        if(teile[0]) name = teile[0];
        if(teile[1]) thema = teile[1];
        $('#blog').hide();
            if(!value.match(/ADFRAME/)) {
                $(document).scrollTo('#aufmacher','fast');
                $('#blogMenu').load('/snp/blog_menu.snp',{A_NAME:name,ETIKETT:thema,id:id});
                $('#blog').load('/blog/article.snp',{A_NAME:name,ETIKETT:thema,id:id},function() {
                    $('#blog').show();
                });
            }
            else {
                $('#blog').fadeIn('fast');
            }

    });

1 Ответ

0 голосов
/ 02 ноября 2012

Было бы более полезно, если бы вы установили демо, чтобы мы могли на него посмотреть.Но, взглянув на свой код, вы должны убедиться, что вы инициируете событие до того, как все загрузится. 

$(function () { // NOT $(document).ready(function () {});
    $.address.init();
});

Также вам может потребоваться вызвать изменение хеша, когда хеша нет. 

$(function () {
    $.address.init();
    $.address.change(); // Triggers hash change when there is no hash!
});

Глядя на там код, похоже, что они используют макет, отличающийся от вашего. 

var init = true,
state = window.history.pushState !== undefined;

// Handles response
var handler = function (data) {
    $('title').html($('title', data).html());
    $('.content').html($('.content', data).html());
    $('.page').show();
    $.address.title(/>([^<]*)<\/title/.exec(data)[1]);
};

$.address.state('/jquery/address/samples/state').init(function () {

    // Initializes the plugin
    $('.nav a').address();

}).change(function (event) {

    // Selects the proper navigation link
    $('.nav a').each(function () {
        if ($(this).attr('href') == ($.address.state() + event.path)) {
            $(this).addClass('selected').focus();
        } else {
            $(this).removeClass('selected');
        }
    });

    if (state && init) {

        init = false;

    } else {

        // Loads the page content and inserts it into the content area
        $.ajax({
            url:$.address.state() + event.path,
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                handler(XMLHttpRequest.responseText);
            },
            success:function (data, textStatus, XMLHttpRequest) {
                handler(data);
            }
        });
    }

});

if (!state) {

    // Hides the page during initialization
    document.write('<style type="text/css"> .page { display: none; } </style>');
}

Если вы настроите демонстрацию, я обновлю свой ответ.

...