Как сделать сайт без перезагрузки?

Question

[hrvasiliy]

Пытаюсь сделать сайт без перезагрузки страниц. Пришел к тому, что при клике по ссылке идет переход клика, далее отправляется запрос на AJAX и возвращается другая страница. Написал следующий скрипт:

$(document).ready(function(){
	$('a').click(function(){
		NProgress.start();
		NProgress.set(0.3);

		var page = $(this).attr('href');
		$('html').load(page, function(){
			$(window).load(function () {
			  NProgress.done();
			});
		});
		history.pushState(null, null, page);
		return false;
	});
});

1. Используя данный скрипт, не всегда страница генерируется без перезагрузки, то есть иногда страница перезагружается, иногда обновляется информация без перезагрузки.
2. Когда все же страница обновляется без перезагрузки, то другие элементы JS не подгружаются (если конкретней, то не работает noUiSlider + в консоли браузера выводятся ошибки, касающиеся NProgress).

Можно ли как-то решить приведенные проблемы?

Answer 1

[Александр Мельниченко]

Pjax

Answer 2

[Alex]

AngularJS в руки

Comments

[hrvasiliy]

Вы думаете стоит нагружать сайт фрейворком ради перезагрузки?

[Alex]

hrvasiliy: я думаю, что стоит задуматься о концепции MVC.
Если надо поменять 1 див на другой, дак затяните его сразу и скрывайте-открывайте классами, а не тяните его с сервера при клике на ссылку.
А если на коленке делать SPA из jQuery, то лучшее взять Angular

Answer 3

[Максим Митрущенков]

Здравствуйте. Во первых мне кажется что нужно делать preventDefault(). Во вторых вы слышали вообще о такой штуке как AngularJS? Зачем же изобретать велосипед и натыкаться на те грабли, которые разгребли уже до вас?

UPD
Да и зачем делать load всему html? А не допустим только #content? Неужели у вас на разные роуты подключаются разные библиотеки и стили?

Comments

[hrvasiliy]

Что конкретно я изобретаю? На сколько я понял, тут требуется минимальне количество строк кода. Зачем подключать целый фреймворк, если все остальнве его функции не требуются? Я описал ошибки, которые я не знаю как решить.

[Максим Митрущенков]

Хорошо, про первую проблему я в принципе описал что нужно сделать. Просто сделайте вместо $('a').click(function(){ ... вот так $('a').click(function(e){ e.preventDefault(); .... Про вторую проблему вроде тоже. Обновляйте html не целиком, а только контентную часть.

[Максим Митрущенков]

И как ответил ниже человек Владлен Ultra, нужно действительно обернуть это не в обычный .click(), а в .on('click', ...)

[hrvasiliy]

maxsprite: Заменил.

При нажатии на ссылку главной, 1 раз происходит перезагрузка страницы, 2 раз обновление без перезагрузки и так далее.
Вторая проблема так и не решена.
Итог: не решено ничего.

Answer 4

[Дмитрий Беляев]

При перезаписи документа на новых ссылках обработчика клика еще нет, поэтому его обрабатывает сам браузер.
Так же в Вашем примере обработчики для удаленных ссылок навсегда останутся в памяти - а это утечка

Comments

[hrvasiliy]

Дмитрий Беляев А как правильно надо делать? Изменил на это, работает так же как и в самом начале:

$(function(){
  $(document.body).on('click','a',function(e){
    e.preventDefault();
    NProgress.set(0.4);
    var href = $(this).attr('href');
    $.post(href,function(data){
      NProgress.done();
      $('html').html(data);
      history.pushState(null,null, href);
    });
  });
});

[Дмитрий Беляев]

hrvasiliy: теперь обработчик висит на body - что уже лучше, вот только перезаписываете Вы элемент html - а следовательно body у Вас тоже новый и обработчика на нем нет
Вариант 1й: при запросе по ajax возвращать только содержимое body и перезаписывать только содержимое body - придется поправить бэкенд
Вариант 2й: снимать обработчик со старого body и вешать на новый

В любом случае, пару замечаний:
1. В чем смысл данного кода, если Вы все равно грузите страницу целиком?
2. post запросы браузеры не кэшируют, что плохо