Как сделать так, чтобы переход по пагинации оставался внутри ajax-страницы?

Question

[Korneliy]

Страница подгружается на текущий странице по клику:

$(document).ready(function () {
    $("#show").click(function () {
          $("#container").empty(),$("#container").append($("<div></div>").load("page.html"));
    });	
});

На этой page.html есть пагинация. Но при переходе на вторую или любую другую страницу загружается уже та страница полностью.

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

Может ли это сделать ajax?

Comments

[ProjectSoft]

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

$(document).on('click', '#container .paginate a', function(e){
	e.preventDefault();
	// Получаем ссылку
	let href = this.href;
	// загружаем
	$("#container").append($("<div></div>").load(href));
	return !1;
});

Скрипт, конечно, только для примера.

[Korneliy]

ProjectSoft, отлично!
Только спереди поставил
$("#tabs-container").empty(),
чтобы новая страница загружалась вместо предыдущей, а не ниже, но это частности. :)

Но я думал, что справлюсь, поэтому не конкретизировал условие.
У меня было не
load("page.html")
а
load("page.html #post")

То есть, подгружал блок на странице, а не её целиком.

Теперь пытаюсь в Ваш код вставить
load(href "#post")
Но увы...

[ProjectSoft]

Korneliy, я ж говорил - не знаю вашего фронтенда и вашего бэкенда.
Далее.
Что за конструкция?
load(href "#post")
Это нонсенс!
У вас пагинация - с неё и получаем ссылки!
Ну хотя бы так
load(href + "#post")
Но кажется это неправильно, или я ошибаюсь
Покажите вёрстку пагинации. Как у вас организованы ссылки?

[Korneliy]

ProjectSoft, точно, конкатенировать! Вот я дуб!

Всё получилось!

Просьба оформить это ответом, а не комментарием, чтобы я сделал решением. :)

Answer 1

[zkrvndm]

Грузите данные не в div а в iframe, тогда вся пагинация у вас будет происходит чисто внутри iframe не затрагивая основную страницу.

$(function () {
    $("#show").one('click', function () {
          $("#container").html('<iframe src="page.html"></iframe>');
    });	
});

Высоту и ширину фрейма можно задать либо фиксировано через css, либо править динамически при помощи JS. При правильной высоте и ширине границы фрейма не отображаются и не видны.

Comments

[Korneliy]

Давно уже считал, что iframe - устаревшая технология для загрузки в нее других страниц. Ладно ещё, ролик с Йутуба вставить.
ProjectSoft дал прекрасное рабочее решение.