• Как оптимизировать AJAX фоновую перезагрузку контента на странице?

    PageUp
    @PageUp Автор вопроса
    ThunderCat, Я отказался от JSON и вернулся к HTML варианту, и все казалось бы работает, но почему то с каждым переходом по ссылке количество запросов одинаковых возрастает и растет пока скрипт не начинает глючить и начинает перебирать страницы из фона мотая то взад, то вперед
    https://qna.habr.com/q/1246832
  • Почему не работает функция Ajax?

    PageUp
    @PageUp Автор вопроса
    Сергей delphinpro, глюки какие то теперь, такие же как и вчера были. Какое то время работает нормально, а потом начинаются перескакивания страниц туда сюда, прыгает с одной на другую очень быстро. Некоторые запросы по 2 раза передаются.
  • Почему не работает функция Ajax?

    PageUp
    @PageUp Автор вопроса
    Сергей delphinpro, В общем убрал все лишнее, но ссылки теперь работают как обычные. С перезагрузкой всей страницы. Как же я намучился уже с этим Ajax)) После PHP, на котором я всегда, для меня просто темный лес.

    <script>
    			$(document).on("click", "a", function(evt) {
    				evt.preventDefault();
    
    				var redirect_url = $(this).attr('href');
    				$.ajax({
    					url: redirect_url,
    					cache: false,
    					data: {
    						ajax: true
    					},
    					success: function(responce) {
    						// Если доступен API истории  
    						if (!(typeof history.pushState === 'undefined')) {
    							history.pushState({
    									url: redirect_url,
    									title: document.title
    								},
    								document.title,
    								redirect_url
    							);
    						}
    
    						$('#content').html(responce);
    					},
    					error: function(jqXHR, textStatus, errorThrown) {
    						console.log(jqXHR, textStatus, errorThrown);
    					}
    				});
    				return false; //что бы не выполнять переход дефолтный
    			});
    		</script>


    P.S. а не,заработали, просто я забыл что я отключал на время подключение jquery. Когда химичил с JSON
    Но этот вариант с HTM ненадежен как я понимаю, я вчера подобныую функцию писал по чути и там прям глюки были
    https://qna.habr.com/q/1246578
  • Почему не работает функция Ajax?

    PageUp
    @PageUp Автор вопроса
    Сергей delphinpro, Ну я всю страницу передаю, а не строку. PHP страница со множеством всевозможных функций.
  • Почему не работает функция Ajax?

    PageUp
    @PageUp Автор вопроса
    Короче как я понял, проще просто убрать все упоминания JSON и передавать контент как html
  • Почему не работает функция Ajax?

    PageUp
    @PageUp Автор вопроса
    Сергей delphinpro, Не получается. Все перепробовал.
    Все document. в скрипте изменил на тег дива $('#content').
    Менял расположение этого DIV относительно скрипта.
    Если div в коде расположен ниже скрипта, то ссылки работают как обычные.
    Если div в коде расположен выше скрипта, то снова выдает эту же ошибку '<', "<!doctype
    Как дать понять скрипту, что мне нужно JSON див элемента только менять?
  • Почему не работает функция Ajax?

    PageUp
    @PageUp Автор вопроса
    Сергей delphinpro, не, ну так-то да, у меня страница именно что в PHP, но по разметке html. То есть мой индекс начинается прям с
    <!doctype html>
    <html lang="ru">

    А передавать можно только div элементы без этого, верно?
    Получается он всю страницу загоняет в json, упирается в тег <!doctype и выдает сразу ошибку.
    Выходит, что надо document. изменить на div $('#content')., который идет уже внутри страницы, после <!doctype

    Надеюсь правильно понял
  • Почему не работает функция Ajax?

    PageUp
    @PageUp Автор вопроса
    Сергей delphinpro, Серверную, это где-то в .htaccess задается? Или прямо в этом же коде что-то поправить нужно, что бы в JSON передавалось, а не в HTML
  • Почему не работает функция Ajax?

    PageUp
    @PageUp Автор вопроса
    Сергей delphinpro, какая-то синтаксическая ошибка по всей видимости
    'parsererror' SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
        at parse (<anonymous>)
        at jquery-3.6.3.min.js:2:79897
        at l (jquery-3.6.3.min.js:2:80014)
        at XMLHttpRequest.<anonymous> (jquery-3.6.3.min.js:2:82782)
  • Почему не работает функция Ajax?

    PageUp
    @PageUp Автор вопроса
    А куда это добавить? Я просто в Ajax да и в принципе Javascript совсем новичок. Буквально вторая моя функция на этом языке, которую я пытаюсь внедрить в силу обстоятельств, что вынудили
  • Почему не работает функция Ajax?

    PageUp
    @PageUp Автор вопроса
    Danny Arty, поменял на url: redirect_url, не помогло.
    Да и по сути url: redirect_url, имеет это же значение, тут просто прямая строка поменяна на переменную со значением этой строки.
  • Как оптимизировать AJAX фоновую перезагрузку контента на странице?

    PageUp
    @PageUp Автор вопроса
    ThunderCat, Если сделать логирование, то из сообщений приходит только первое here1, что идет до вызова основной функции.
    Все остальные сообщения в консоли не появляются.
    GET запрос в консоли видно со всеми новыми параметрами, включая и ajax=true.

    <script>
    				$(document).on("click", "a", function(evt) {
    					evt.preventDefault();
    
    					var redirect_url = $(this).attr('href');
    					console.log("here1");
    					$.ajax({
    						'url': $(this).attr('href'),
    						cache: false,
    						data: {
    							ajax: true
    						},
    						dataType: "json",
    						success: function(json) {
    							console.log("here");
    							if (json.redirect) {
    								if (json.load_html) {
    									// Если доступен API истории  
    									if (!(typeof history.pushState === 'undefined')) {
    										history.pushState({
    												url: redirect_url,
    												title: document.title
    											},
    											document.title, // Можно также использовать json.title для установки заголовка предыдущей страницы на сервере
    											redirect_url
    										);
    									}
    									console.log("3");
    									document.open();
    									document.write(json.html);
    									document.close();
    								} else {
    									console.log("2");
    									window.location = redirect_url;
    								}
    							} else {
    								console.log("1");
    								$('#content').html(json.message);
    							}
    							console.log(json.html);
    						},
    					});
    					return false; //что бы не выполнять переход дефолтный
    
    				});
    			</script>
  • Как оптимизировать AJAX фоновую перезагрузку контента на странице?

    PageUp
    @PageUp Автор вопроса
    ThunderCat, в том и дело что в консоли нет ошибок и страница приходит какая нужно. С обновленным div. Но на экране он не обновляется
  • Как оптимизировать AJAX фоновую перезагрузку контента на странице?

    PageUp
    @PageUp Автор вопроса
    ThunderCat, Написал такое вот

    $(document).on("click", "a", function() {
    
    				var redirect_url = $(this).attr('href');
    				$.ajax({
    					'url': $(this).attr('href'),
    					cache: false,
    					data: {
    						ajax: true
    					},
    					dataType: "json",
    					success: function(json) {
    						if (json.redirect) {
    							if (json.load_html) {
    								// If the History API is available  
    								if (!(typeof history.pushState === 'undefined')) {
    									history.pushState({
    											url: redirect_url,
    											title: document.title
    										},
    										document.title, // Can also use json.title to set previous page title on server
    										redirect_url
    									);
    								}
    								document.open();
    								document.write(json.html);
    								document.close();
    							} else {
    								window.location = redirect_url;
    							}
    						} else {
    							$('#content').html(json.message);
    						}
    					},
    				});
    				return false; //что бы не выполнять переход дефолтный
    			});


    Приходит в консоль верная ссылка, ответ 200, ошибок так же не наблюдается. Но почему-то страница сама не обновляется в браузере. Контент не меняется. Почему?(
  • Как оптимизировать AJAX фоновую перезагрузку контента на странице?

    PageUp
    @PageUp Автор вопроса
    ThunderCat, вот так?

    $(document).on("click", "a", function(evt) {
    				evt.preventDefault();
    
    				$.ajax({
    					'url': $(this).attr('href'),
    					cache: false,
    					success: function(responce) {
    						$("#content").html(responce);
    					}
    				});
    				return false; //что бы не выполнять переход дефолтный
    			});

    Или так?
    $(document).on("click", "a", function(evt) {
    
    				$.ajax({
    					'url': $(this).attr('href'),
    					cache: false,
    					success: function(responce) {
    						evt.preventDefault();
    						$("#content").html(responce);
    					}
    				});
    				return false; //что бы не выполнять переход дефолтный
    			});


    А куда пихать History.pushState(). я так и не понял
  • Как сделать ссылку jQuery в PHP коде, который обновит страницу с новыми GET параметрами?

    PageUp
    @PageUp Автор вопроса
    $(document).on("click", "a", function() {
    
          $.ajax({
            'url': $(this).attr('href'),
            success: function(responce) {
              $("#content").html(responce);
    
              $('#content').show(responce);
    
            }
          });
    
          event.preventDefault();
          return false; //что бы не выполнять переход дефолтный
        });


    Написал так. И добавил в div class="" еще и ID= которого не было. Заработало вроде. Но как то не так все равно. Иногда все начинает глючить и начинается какой-то цикл переходов туда-сюда, вперед назад. Пока не обновишь страницу через F5. Как будто нажимается стрелка назад и вперед много раз в браузере.
  • Как сделать ссылку jQuery в PHP коде, который обновит страницу с новыми GET параметрами?

    PageUp
    @PageUp Автор вопроса
    Переместил весь блок Ajax в код по перехвату ссылки, а не только ajax(). Ссылки перестали работать, но при этом и подргузка нового контента не происходит по прежнему)

    $(document).on("click", "a", function() {
    
          $.ajax({
    			'url': $(this).attr('href'),
    			success: function(responce) {
    
            $("#article clearfix").html(responce);
    			}
    		});
    
          event.preventDefault();
    			return false; //что бы не выполнять переход дефолтный
    		});


    В консоль он страницу новую передает. Ту на которую я бы попал если бы нажал на простую ссылку. Но вот только в браузере он не обновляет контент на эту страницу. Я так понимаю этот respone теперь нужно как то через fetch например передать и вывести?

    Добавил
    fetch("http://localhost/dk/index.php")
            .then(function(response) {
              // When the page is loaded convert it to text
              return response.text()
            })
            .then(function(html) {
              // Initialize the DOM parser
              var parser = new DOMParser();
              // Parse the text
              var doc = parser.parseFromString(html, "text/html");
              // You can now even select part of that html as you would in the regular DOM 
              // Example:
              var docArticle = doc.querySelector('article').innerHTML;
              console.log(doc);
            })
            .catch(function(err) {
              console.log('Failed to fetch page: ', err);
            });


    И снова не работает. В консоль ошибки не выводит, в консоли прям всю страничку загружает, с разметками даже, которые можно развернуть/свернуть. Но вот в окне сайта самого ничего не меняется. Что я делаю не так?
  • Как сделать ссылку jQuery в PHP коде, который обновит страницу с новыми GET параметрами?

    PageUp
    @PageUp Автор вопроса
    mrStrike, хоть что-то проясняться стало в этой мутной схеме, что и для чего и что конкретно что значит)) Хоть и не работает у меня пока, но направление куда идти хотя бы понятно. А в целом у меня на странице только одно обновляется, мне не нужно обновлять по блокам. Принцип такой что на Index передается GET параметр и в связи с ним Index либо подргружает в себя какой-то модуль, либо на самом индексе дополнительно показывает что нибудь. Мне достаточно просто обновлять Index с новыми Get параметрами которые передаются в ссылке. Все. Большего не нужно)

    Написал все как надо и в консоль вся страница прилетает, но почему то ссылки все равно работают так же, как всегда, как обычные ссылки, обновляя всю страницу целиком
  • Как сделать ссылку jQuery в PHP коде, который обновит страницу с новыми GET параметрами?

    PageUp
    @PageUp Автор вопроса
    mrStrike, Ну вот так понятен принцип работы. Но почему-то все равно не пашет, а на первом же этапе при перехвате ссылки и блока с $.ajax() в консоли выдало ошибку :"Uncaught ReferenceError: $ is not defined", а по задумке должно было страницу в консоль выдать, очень странно.

    Перенес в файл выше, из индекса, в тот что подключается ДО css и страница и правда в консоль прилетела. Уже какой то прогресс)

    Ну вот только она чисто HTML, только данные внешние без бэкэнда по сути. Для того что бы все GET/POST и вложенные функции работали, наверное надо что то дополнительно вкладывать?
  • Как сделать ссылку jQuery в PHP коде, который обновит страницу с новыми GET параметрами?

    PageUp
    @PageUp Автор вопроса
    $(document).on("click", "a", function(){
      ajax()
      return false; //что бы не выполнять переход дефолтный
    });
    
    $.ajax({
     'url':$(this).attr('href'),
     success:function(responce){
    
      console.log('Перехват');
      return false; //что бы не выполнять переход дефолтный
    }
    });

    В консоль сообщение мое прилетает. Ссылка все равно активируется простым способом, return false игнорируется.
    Ну допустим перехватил я ссылку, а дальше что