Cotonti / Open Source PHP Content Management FrameworkContent Management Framework

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

12NächsteLetzte

Dr2005alex
#1 27. September 2013, 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 28. September 2013, 05:49
Раньше это не делалось изза угадай какого браузера))))что и как и где проверено? Я 2 руками за
littledev.ru - мой маленький зарождающийся блог о котонти.
снижение стоимости программирования и снижение стоимости производства разные вещи. Первое можно скорее сравнить с раздачей работникам дешевых инструментов, чем со снижением зарплаты
Dr2005alex
#3 28. September 2013, 07:04
В данный момент тестируется на сайте. (ссылка в первом посте). Проверяю на совместимость с другими скриптами работающих на котонти.
WebKaa.ru - Cotonti Relax
Trustmaster
#4 28. September 2013, 15:59
Dr2005alex
#5 29. September 2013, 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

Dieser Beitrag wurde von Dr2005alex (am 29. September 2013, 12:14, vor 8 Jahre) bearbeitet
esclkm
#6 29. September 2013, 19:10
А ие помладше?
littledev.ru - мой маленький зарождающийся блог о котонти.
снижение стоимости программирования и снижение стоимости производства разные вещи. Первое можно скорее сравнить с раздачей работникам дешевых инструментов, чем со снижением зарплаты
Dr2005alex
#7 29. September 2013, 19:52
#38055 esclkm:
А ие помладше?

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

WebKaa.ru - Cotonti Relax
Macik
#8 29. September 2013, 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 29. September 2013, 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

Dieser Beitrag wurde von Dr2005alex (am 29. September 2013, 21:29, vor 8 Jahre) bearbeitet
Dayver
#10 30. September 2013, 20:16

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

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

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

Pavel Tkachenko aka Dayver. Гик и веб мастер который делает сайты, увлекается электроникой и очень любит смотреть кино.
О себе: Я злой и страшный серый волк, я в поросятах знааааюююю толк

Dieser Beitrag wurde von Dayver (am 30. September 2013, 20:24, vor 8 Jahre) bearbeitet
Dr2005alex
#11 1. Oktober 2013, 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

Dieser Beitrag wurde von Dr2005alex (am 2. Oktober 2013, 19:29, vor 8 Jahre) bearbeitet
Dayver
#12 4. Oktober 2013, 08:44

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

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

Pavel Tkachenko aka Dayver. Гик и веб мастер который делает сайты, увлекается электроникой и очень любит смотреть кино.
О себе: Я злой и страшный серый волк, я в поросятах знааааюююю толк
Dr2005alex
#13 4. Oktober 2013, 15:47

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

WebKaa.ru - Cotonti Relax
Macik
#14 6. Oktober 2013, 01:14

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

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

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

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

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

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

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

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

WebKaa.ru - Cotonti Relax

Dieser Beitrag wurde von Dr2005alex (am 7. Oktober 2013, 16:01, vor 8 Jahre) bearbeitet

12NächsteLetzte