Forums / National / Russian / Идеи / Доработка ajaxHelper

12>>>

Dr2005alex
#1 2013-09-27 20:03

Выставляю на обсуждение небольшую доработку ajaxHelper

Так как ajaxHelper подставляет hash данные для ajax загрузки в адресную строку, он немного портит её вид. Она становится типа.

http://ваш сайт/#get-light_page;blog/cotonti/;

Все это ради сохранения истории браузера, НО.... ведь можно историю переписать так, как нам надо.

В общем мое предложение: Что бы ссылки были того же вида каки без ajax.

Тоесть не http://ваш сайт/#get-light_page;blog/cotonti/;

а http://ваш сайт/blog/cotonti/

Пример данной реализации уже работает на сайте http://dev.ob4aga.ru/

Предложение добавить в base.js перезапись истории с передачей данных для ajax

Изменим кусок кода из base.js

		$('body').on('click', 'a.ajax', function() {
            var make_hash = ajaxMakeHash($(this).attr('href').replace(/#.*$/, ''), $(this).attr('rel'));
			$.historyLoad(make_hash);
            //dr2005alex
            history.replaceState ({rel:make_hash}, '', $(this).attr('href').replace(/#.*$/, ''));
            /*------------------------*/
			return ajaxError;
		});

тут 

history.replaceState ({rel:make_hash}, '', $(this).attr('href').replace(/#.*$/, ''))

Записывает данные для ajax в переменную rel и заменяет адресс на оригинальный.

Далее нам надо отследить событие нажатие в браузере назад и вперед.

Добавляем обработчик после данного кода.

		window.addEventListener('popstate', function(e){
		 ajaxPageLoad(history.state.rel);
		}, false);

 

Теперь при переходе назад/вперед вызывается функция  

ajaxPageLoad с сохраненными в истории данными для ajax загрузки страницы.

Теперь мы имеем стандартые ссылки в адр. строке без хэша и работающий ajaxHelper как обычно.

P/S Чем вам не Вконтакте? ))) Можно теперь и плеер слушать во время прогулок по сайту....

WebKaa.ru - Cotonti Relax
esclkm
#2 2013-09-28 05:49
Раньше это не делалось изза угадай какого браузера))))что и как и где проверено? Я 2 руками за
littledev.ru - мой маленький зарождающийся блог о котонти.
снижение стоимости программирования и снижение стоимости производства разные вещи. Первое можно скорее сравнить с раздачей работникам дешевых инструментов, чем со снижением зарплаты
Dr2005alex
#3 2013-09-28 07:04
В данный момент тестируется на сайте. (ссылка в первом посте). Проверяю на совместимость с другими скриптами работающих на котонти.
WebKaa.ru - Cotonti Relax
Trustmaster
#4 2013-09-28 15:59
Dr2005alex
#5 2013-09-29 11:44
Исправим дабы небыло ошибок
window.addEventListener('popstate', function(e){
 ajaxPageLoad(history.state.rel);
}, false);

на

		window.addEventListener('popstate', function(e){
		  if(history.state !== null) {ajaxPageLoad(history.state.rel); }
		});

 

Добавлено 28 минуты спустя:

Проверил в браузерах

Chrome - OK

Opera - OK

Mozilla Firefox - OK

Explorer 10 - OK

WebKaa.ru - Cotonti Relax

Dit bericht is bewerkt door Dr2005alex (2013-09-29 12:14, 10 jaren ago)
esclkm
#6 2013-09-29 19:10
А ие помладше?
littledev.ru - мой маленький зарождающийся блог о котонти.
снижение стоимости программирования и снижение стоимости производства разные вещи. Первое можно скорее сравнить с раздачей работникам дешевых инструментов, чем со снижением зарплаты
Dr2005alex
#7 2013-09-29 19:52
#38055 esclkm:
А ие помладше?

у меня его нет, если есть желание зайди на сайт http://dev.ob4aga.ru с младшей версии....

WebKaa.ru - Cotonti Relax
Macik
#8 2013-09-29 21:03

Тема хорошая, но…

`popstate` только с 10-й версии IE и ограничениями в Сафари.

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/popstate

https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F
Dr2005alex
#9 2013-09-29 21:20

Я предлагаю все сделать очень просто. Для тех кто пользуется старыми браузерами, эту фичу отключать и работать с  хэшем в адрессной строке. 

А для продвинутых и фишку рабочую. В конце концов браузеры идут вперед и всеравно все будут поддерживать.

Вобщем общий код получается такой 

function supports_html5(e) {return !!e;}

		$('body').on('click', 'a.ajax', function() {
		    var make_hash = ajaxMakeHash($(this).attr('href').replace(/#.*$/, ''), $(this).attr('rel'));
		    $.historyLoad(make_hash);
		    if(supports_html5(history.replaceState)) history.replaceState ({rel:make_hash}, '', $(this).attr('href').replace(/#.*$/, ''));
		    return ajaxError;
		});

		$( window ).bind( "popstate", function( e ){
		  if(history.state !== null && supports_html5(history.state) ) {ajaxPageLoad(history.state.rel); }
		});

Я тут добавил функцию проверки. Поддерживает ли браузер данный оператор.

function supports_html5(e) {return !!e;}

Если поддерживает , то исполняем, ну а если не поддерживает, то смотрите на hash в адрессной строке.

Но ИМХО не правильно будет если усер скопирует адрессную строку с хэшем в ней и поделится с пользователем, в которой сама ссылка будет вести на страницу А а хэш на страницу Б.

Добавлено 9 минуты спустя:

обновил на сайте скрипт, можете тестить на разных браузерах.

WebKaa.ru - Cotonti Relax

Dit bericht is bewerkt door Dr2005alex (2013-09-29 21:29, 10 jaren ago)
Dayver
#10 2013-09-30 20:16

глючит-глючит ... вот тыкнул тут по ссыле  http://dev.ob4aga.ru  крутанул до темы "Как заставить скрипт работать и после ajax загрузки страницы" тыкнул в нее .... почитал ... нажал Backspace страница подергалась в урле смотрим и видим вроде вернулись назад а тело все то же от пейджи а ведь должно было перегрузить до списка пейдже (хром, опра все последних версий)

Добавлено 8 минуты спустя:

тыканье в кнопку(стрелку)  назад в браузере тоже самое происходит ... блин а как красиво должно было получится ..... хотя вот о обратной совсемтимости наверное не думал? а ведь тех кто сиену юзает наверное уже немало .... или решение будет работать парально давая поддержку старому формату работы аякс истории через хеш в адесной строке?

Pavlo Tkachenko aka Dayver

Dit bericht is bewerkt door Dayver (2013-09-30 20:24, 10 jaren ago)
Dr2005alex
#11 2013-10-01 03:31
#38063 Dayver:

глючит-глючит ... вот тыкнул тут по ссыле  http://dev.ob4aga.ru  крутанул до темы "Как заставить скрипт работать и после ajax загрузки страницы" тыкнул в нее .... почитал ... нажал Backspace страница подергалась в урле смотрим и видим вроде вернулись назад а тело все то же от пейджи а ведь должно было перегрузить до списка пейдже (хром, опра все последних версий)

Добавлено 8 минуты спустя:

тыканье в кнопку(стрелку)  назад в браузере тоже самое происходит ... блин а как красиво должно было получится ..... хотя вот о обратной совсемтимости наверное не думал? а ведь тех кто сиену юзает наверное уже немало .... или решение будет работать парально давая поддержку старому формату работы аякс истории через хеш в адесной строке?

Упс, точно.  Посмотрюс... 

Добавлено 2 дня спустя:

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

Теперь у нас есть красивый вариант ajaxHelper. Тестируем на http://dev.ob4aga.ru/

Теперь страница обновляется и при возврате назад и вперед, даже если нету хэша.

Рабочий на данный момент код

        function supports_html5(e) {return !!e;}

        $('body').on('click', 'a.ajax', function() {
            var make_hash = ajaxMakeHash($(this).attr('href').replace(/#.*$/, ''), $(this).attr('rel'));
            $.historyLoad(make_hash);
            if(supports_html5(history.replaceState)) history.replaceState ({rel:make_hash}, '', $(this).attr('href').replace(/#.*$/, ''));
            return ajaxError;
        });

		$( window ).bind( 'load', function( event ) {
			if(supports_html5(history.replaceState))history.replaceState ({main:true}, '', location.href);
			setTimeout( function(){
						$( window ).bind( 'popstate', function( event ) {

							if(supports_html5(history.state) && supports_html5(history.replaceState))
							{
								if(history.state !== null  && history.state.main)window.location = location;
								if(history.state !== null  && history.state.rel)ajaxPageLoad(history.state.rel);
								if(history.state === null )history.replaceState ({main:true}, '', location.href);
							}
						});
			},0);
		});

или решение будет работать парально давая поддержку старому формату работы аякс истории через хеш в адесной строке?

Данный вариант никак не изменяет работу ajaxHelper , а только маскирует его. Это означает что он работает в старом формате.

Скрипт просто изменяет адресс в адрессной строке на более логичный а хэш сохраняет в истории браузера. При кликанье вперед/ назад - скрипт берет данные хэша из истории браузера. Тем самым поддерживает работу ajaxHelper.

Единственное что я не тестировал, это работу с формами, т.к. нет никакого действующего примера использования ajaxHelper  в данной ситуации. 

WebKaa.ru - Cotonti Relax

Dit bericht is bewerkt door Dr2005alex (2013-10-02 19:29, 10 jaren ago)
Dayver
#12 2013-10-04 08:44

Хотел глянуть да потыкать да вот

Доступ к сайту ob4aga.ru прекращен

Pavlo Tkachenko aka Dayver
Dr2005alex
#13 2013-10-04 15:47

Сорри))) хостинг сдох..... сейчас все норм, можно ПотыКать и ПотеСтить)

WebKaa.ru - Cotonti Relax
Macik
#14 2013-10-06 01:14

Алекс, тебе на заметку  https://github.com/huboo/jquery-ajax-html5-cache

Вдруг пригодится...

https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F
Dr2005alex
#15 2013-10-06 07:24
#38120 Macik:

Алекс, тебе на заметку  https://github.com/huboo/jquery-ajax-html5-cache

Вдруг пригодится...

Спасибо, буду знать..

Добавлено 1 дня спустя:

ну что? потыкали? кто нибудь тестил?

WebKaa.ru - Cotonti Relax

Dit bericht is bewerkt door Dr2005alex (2013-10-07 16:01, 10 jaren ago)

12>>>