Загрузка с AJAX и привязка к загруженному контенту - PullRequest
Новая
       1

Загрузка с AJAX и привязка к загруженному контенту

1 голос
/ 30 октября 2010

Я создаю веб-сайт для организации коллекций комиксов.

Таким образом, у вас слева список ваших комиксов, и если вы щелкнете по одному из них, страница с информацией об этом комиксе будет загружена справа с помощью AJAX с функцией jQuery load().

У меня есть страница не для каждого комикса, а для каждой серии (одна для всех "Ходячих мертвецов", одна для всех "Человек-паук" ...), поэтому на каждой странице может быть много разных комикс.

Однако, нажимая на определенный комикс, я не только хочу загрузить правильную страницу, но и перейти на правильную позицию на этой странице.

У меня есть якоря на каждой странице (# i12, # i13 с уникальным номером каждый раз).

Как я могу, после того, как контент загружен с помощью AJAX, перейти к правильной привязке? Я попытался динамически изменить URL страницы (добавив # i12 в конце), но безуспешно.

Я использовал document.location.hash, плохая идея?

Очень простой пример: при нажатии на ссылку страница загружается в div, и я бы хотел, чтобы страница прокручивалась до якоря #i120

Главная страница: 

<div id="list">
<a href="test.php#i120">Go to num 120</a>
</div>
<div id="content">

</div>

Javascript: 

$("a").live('click',function (event)
{
    $("#Content").load(this.href);

    event.stopImmediatePropagation();
    event.preventDefault();
});

Page Test.php: 

<div id="i1">Text1</div>
...
...
<div id="i120">Text120</div>

Ответы [ 2 ]

4 голосов
/ 30 октября 2010

Во-первых, давайте избавимся от недопустимых идентификаторов, они не могут начинаться с цифры до HTML5, я бы поставил перед вашими идентификаторами что-то вроде id="nav1".

Эта часть очистки, что вы можете сделать для прокрутки это: 

$("a").live('click', function(event) {
    var hash = this.hash;
    $("#Content").load(this.href, function() {
      document.location.hash = hash;
    });
    event.stopImmediatePropagation();
    event.preventDefault();
});

Это запустится после загрузки контента, так что есть что прокрутить. Такой подход тут же срабатывает, поэтому для его оживления ... это тоже достаточно просто: 

$("a").live('click', function(event) {
    var hash = this.hash;
    $("#Content").load(this.href, function() {
      var st = $(hash).scrollTop();
      $('html, body').animate({ scrollTop: st }, 200); //200ms duration
    });
    event.stopImmediatePropagation();
    event.preventDefault();
});

Мы храним this.hash как переменную, потому что внутри этого обратного вызова this будет ссылаться на элемент #Content, а не на якорь, на котором мы щелкнули.

2 голосов
/ 30 октября 2010

Jquery ScrollTo , вероятно, является вашей лучшей ставкой.

В противном случае я бы предложил разместить несколько невидимых ссылок на странице (например, ), а затем после завершения ajax иу вас есть номер ID, который вы запускаете: 

$("#link" + idnumber).click();

Простой, но очень эффективный.

...