За последние 24 часа нас посетили 24172 программиста и 1531 робот. Сейчас ищет 1251 программист ...

Почему после отправки ответа на клиент через ajax теряется начало страницы?

Тема в разделе "JavaScript и AJAX", создана пользователем гендаль серый, 19 июл 2024.

Метки:
  1. гендаль серый

    гендаль серый Новичок

    С нами с:
    20 янв 2023
    Сообщения:
    53
    Симпатии:
    0
    добавление комментов сделал все нормально, добавляются в блок комментариев к которому подключено делегирование событий, в каждом блоке коммента есть свой блок для ответов и вот когда приходит ответ, то пишет -
    Эта страница загружена в режиме Quirks. Это может повлиять на макет страницы. Для режима Standards используйте «<!DOCTYPE html>».

    получается не видит тег DOCTYPE в начале страницы, но при добавлении комментов такого не было и все работает

    обработчик на php в принципе такой же как и при добавлении главных комментов.
    не могу найти проблему..
     
  2. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.787
    Симпатии:
    1.327
    Адрес:
    Лень
  3. гендаль серый

    гендаль серый Новичок

    С нами с:
    20 янв 2023
    Сообщения:
    53
    Симпатии:
    0
    у меня фаерфокс и в хроме не срабатывает...открывается пустая страница с кодом json объекта - тоесть ответа на коммент
     
  4. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    372
    Симпатии:
    68
    Адрес:
    Бавария, Германия
    Добрый день!
    Вы отправляете с сервера в AJAX-Response JSON, а на стороне клиента не обрабатываете JSON-object.
    Ответ на на коммент из JSON в HTML-техт сам не превратится.
    Если хотите, что бы Вам помогли, покажите коды PHP и JS.
    Удачи!
     
    Fell-x27 нравится это.
  5. гендаль серый

    гендаль серый Новичок

    С нами с:
    20 янв 2023
    Сообщения:
    53
    Симпатии:
    0
    тоже есть подозрения на обработку ответа на клиенте...или есть мысли что переменные одинаковые в обработке комментов и ответов
    Код (Javascript):
    1. $(document).ready(function() {
    2.     // Обработчик отправки формы
    3.     $('.answer_comment').on('submit', function(e) {
    4.         e.preventDefault();
    5.      
    6.      
    7.         let formData = new FormData(this);
    8.      
    9.      
    10.         // Находим родительский блок комментария
    11.         let comment = $(this).closest('.comment');
    12.         let answers = comment.find('.answers_to_comment');
    13.         // Отправка данных формы через Ajax
    14.         $.ajax({
    15.             url: '../inner.php',
    16.             timeout: 20000,
    17.             method: 'POST',
    18.             data: formData,
    19.             processData: false,
    20.             contentType: false,
    21.             dataType: 'json',
    22.             success: function(response) {
    23.                 if (response.success) {
    24.                     $('.answer_comment')[0].reset()//очищаем форму;                
    25.                     $('.answerFormDiv').hide();//скрываем див с формой
    26.                  
    27.                     //comment.load('.comment-footer');
    28.                     //// После перезагрузки содержимого показываем футер
    29.                     //comment.show('.comment-footer');
    30.                     //
    31.                     ////Находим кнопку показа ответов внутри комментария и эмулируем клик
    32.                     //answers.show();
    33.                     //
    34.                     //answers.prepend(response.answer);
    35.                  
    36.                 } else {
    37.                     // Если есть ошибка, выводим ошибку
    38.                     $('.answerFormDiv').hide();//скрываем див с формой            
    39.                     $('.comm_info').text(response.errors);
    40.                 }            
    41.              
    42.                 setTimeout(function() {
    43.                     $('.comm_info').text("");
    44.                 }, 5000);
    45.             },
    46.             error: function(xhr, ajaxOptions, thrownError) {
    47.                 // Обработка ошибки
    48.                 console.log(xhr.status);
    49.                 console.log(thrownError);
    50.             }
    51.         });
    52.     });
    53. });
     
  6. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    372
    Симпатии:
    68
    Адрес:
    Бавария, Германия
    У Вас вообще нет обработки ответов.
    Получив успешно response только "очищаем форму и скрываем див с формой".
    Это происходит? Если да, то необходимо получить JSON-object из response
    Код (Javascript):
    1. var returnedData = JSON.parse(response);
    2. console.log(returnedData); //только для отладки
    а затем нужно данные из returnedData вставить в предназначенный для них HTML элемент.
    Вообще-то с JS нужно рабираться видя HTML.
    Если Вы не получаете успешно response или в консоли не увидете то, что там должно быть, то нужно разбираться
    с inner.php и для этого его тоже неплохо бы увидеть.
    Удачи!
     
    #6 Vladimir Kheifets, 20 июл 2024
    Последнее редактирование: 20 июл 2024
  7. гендаль серый

    гендаль серый Новичок

    С нами с:
    20 янв 2023
    Сообщения:
    53
    Симпатии:
    0
    обработка ответа не нужна - из обработчика передается готовый шаблон - блок answer с вставленными в него данными из формы плюс там юзер, пост и тд.

    требуется только на jquery написать например answers.prepend(response.answer) и эта строчка есть ..просто закомментирована...а в консоли приходит json объект ответа..но спасибо за содействие.
     
  8. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    372
    Симпатии:
    68
    Адрес:
    Бавария, Германия
    если так, как Вы написали, то просто раскоментируте,
    а если не получится, то посмотрите, что там
    Код (Javascript):
    1. console.log(response.answer);
     
  9. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    372
    Симпатии:
    68
    Адрес:
    Бавария, Германия
    (дополнение)

    Попробую предположить почему "переменные" одинаковые в обработке комментов и ответов
    из этого
    Код (Javascript):
    1. // Находим родительский блок комментария
    2. let comment = $(this).closest('.comment');
    3. let answers = comment.find('.answers_to_comment');
    следует то, что у parent элемента comment д.б. child элементы с селектором ".answers_to_comment"
    По идеи, на один коментарий может быть несколько ответов и этому должен соответствовать, например, такой HTML
    HTML:
    1. <div class="comment">
    2. <div class="answers_to_comment"></div>
    3. <div class="answers_to_comment"></div>
    4. <div class="answers_to_comment"></div>
    5. </div>
    Если моё предполжение верно, то
    Код (Javascript):
    1. let answers = comment.find('.answers_to_comment');
    будет возвращать не один DOM-элемент, а NodeList.
    Если нужно определить один конкретной элемент из NodeList необходимо указать его индекс,
    например,
    Код (Javascript):
    1. let answers = comment.find('.answers_to_comment')[0];//первый div с селектором '.answers_to_comment'
    либо для определения последнего элемента из NodeList
    Код (Javascript):
    1. let answers = comment.find('.answers_to_comment').last();//последний div с селектором '.answers_to_comment'
    Удачи!
     
  10. гендаль серый

    гендаль серый Новичок

    С нами с:
    20 янв 2023
    Сообщения:
    53
    Симпатии:
    0
     
  11. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    372
    Симпатии:
    68
    Адрес:
    Бавария, Германия
    Замысел понятен. Однако, раз возник вопрос, это пока правильно не работает.
    comment.find('.answers_to_comment') ищет все child элементы в parent comment
    Можете проверить что у Вас answers
    Код (Javascript):
    1. let answers = comment.find('.answers_to_comment');
    2. console.log(answers);
    В обработчике события submit, по идеи, должен динаммически добавляться DOM-элемент для нового ответа.
    Думаю, что в Вашем коде не случайно закоментированы строки.
    Код (Javascript):
    1. //comment.load('.comment-footer');
    2. //// После перезагрузки содержимого показываем футер
    3. //comment.show('.comment-footer');
    4. //
    5. ////Находим кнопку показа ответов внутри комментария и эмулируем клик
    6. //answers.show();
    7. //
    8. //answers.prepend(response.answer);
     
  12. гендаль серый

    гендаль серый Новичок

    С нами с:
    20 янв 2023
    Сообщения:
    53
    Симпатии:
    0
    в консоли так же выдается json блок ответа, данные все уходят и приходят на клиент, но вывод сам неправильно написан видимо..поэтому я и закомментил строчки, хотел другими способами попробовать...ну и так же написано страница загружена в режиме квиркс и просят добавить доктайп..самому интересно в чем подвох...есть мысли что делигирование подключенное к блоку в котором все комменты находятся, как то не срабатывает на внутренние блоки в самих комментах...и я тут для себя открыл что динамически добавленные блоки отсутствуют в исходном коде html страницы, я очень удивился - на странице в исходниках не оказалось вообще комментов..они загружаются при загрузке страницы тоже у меня черз ajax запрос...
     
  13. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    372
    Симпатии:
    68
    Адрес:
    Бавария, Германия
    Динамически добавленные блоки не могут быть в исходном коде html страницы, потому что они создаются в JS.
    Я могу только предпологать, что у Вас для ответа на комментарий есть один или несколько элементов FORM с селектором '.answer_comment'.
    В обработчике события submit, отправляется AJAX-Request.
    Возможно, тип response JSON, задан не верно и ответ должен отпраляться как HTML- техт.
    При успешом AJAX-Response в начало (новый ответ в начале) parent эдемента должен динамически добавляться элемент и определяться его контент (текст ответа).
    Возможно, что нужно закрывать предыдущие ответы и показывать кнопку "Показать все ответы" и прописывать для неё обработчик события click.

    Удачи!
     
    #13 Vladimir Kheifets, 23 июл 2024
    Последнее редактирование: 23 июл 2024
  14. гендаль серый

    гендаль серый Новичок

    С нами с:
    20 янв 2023
    Сообщения:
    53
    Симпатии:
    0
    ну правильно и кнопка показать имеется
     

    Вложения:

    • Screenshot.png
      Screenshot.png
      Размер файла:
      15,6 КБ
      Просмотров:
      3
  15. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    372
    Симпатии:
    68
    Адрес:
    Бавария, Германия
    Кнопка имеется на скриншоте, а в JS обработчика для неё не видно.
    Вы каждый раз по клику страницу перезагружаете?
    Между прочим ответы из предыщих сеансов должны сохраняться в БД, а в текущещем сеансе должны выбирать при разворчивание
    ленты ответов. Для этого должы отправляться AJAX-Request, которых в JS-коде также не видно.
    Удачи!
     
  16. гендаль серый

    гендаль серый Новичок

    С нами с:
    20 янв 2023
    Сообщения:
    53
    Симпатии:
    0
    понял, приму к сведению, спасибо.