Почему рендер узла в DOM дереве происходит только после перезагрузки страницы?
spoilerРеализованный функционал:
При выборе авто из select и клику по кнопке "Добавить", рендерится карточка с авто. Суть в свойстве Cruise, еслиCruise === 1, когдаcheckbox === checked, то в карточке рендерится данный узел
carCruiseTxt.appendChild(document.createTextNode("Круговой тариф")); |
carCruiseTxt.appendChild(document.createTextNode("Круговой тариф"));
из функции addCruiseToRenderCarCart. При Cruise === 0, соответственно узел не будет рендерится. Данный функционал отрабатывает! Так же я сделал фиктивный запрос с сервера в функции fetchVehicleData, с помощью которого, при клике по checkbox я получаю в панели "Тип транспорта" с сервера данные авто (которые сохранены у юзера в личном кабинете), которое юзер так же может отрендерить при клике по добавленной ноде авто. При таком сценарии, с сервера в любом случае приходит Cruise === 1, и узел
carCruiseTxt.appendChild(document.createTextNode("Круговой тариф")); |
carCruiseTxt.appendChild(document.createTextNode("Круговой тариф"));
должен рендерится в карточке, но на данный момент узел не рендерится при первом добавлении, а рендерится в карточке уже после перезагрузки страницы. Я как смог вытащил и склеил куски кода с 3 модулей, где происходят все операции и реализовал сценарий событий.
Из того что я понял, по какой то причине, если добавлять с помощью функции getCarListAll то код не находит carCruiseContainer, хотя в DOM дереве он присутствует.
Ссылки на песочницы:
https://jsfiddle.net/6z8hfu4a/19/
https://codepen.io/Andy41/pen/mdvwGbY?editors=1111
В двух словах нужно нажать на checkbox, а потом по добавленному тексту данных авто, что имеется на скриншоте:
Рендерится карточка с авто:
Та же карточка после перезагрузки страницы (Появился "Круговой тариф", хотя должен был появиться до перезагрузки страницы):
Дополнительно:
кажется настало время для https://vuejs.org/guide/introduction.html
Задача решена, оказывается вместо реализации данной функции: addCruiseToRenderCarCart, можно всего лишь, в шаблоне функции renderCars() описать тернарник:
<div class="car__cruise">${car.Cruise === 1 ? 'круговой тариф' : ''}</div> |
<div class="car__cruise">${car.Cruise === 1 ? 'круговой тариф' : ''}</div>
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, когда рендер узла в DOM дереве происходит только после перезагрузки страницы, может быть вызвана различными причинами. Вот несколько возможных причин и способы их решения:
1. Неправильное использование JavaScript:
- Проверьте, что вы правильно используете JavaScript для добавления или изменения элементов в DOM. Убедитесь, что код JavaScript выполняется после загрузки DOM, например, после события 'DOMContentLoaded'.
- Убедитесь, что ваш JavaScript код не содержит ошибок, которые могут предотвращать правильное выполнение.
2. Проблемы с кэшированием:
- Браузер может кэшировать ранее загруженные данные, включая DOM структуру. Убедитесь, что вы настроили кэширование правильно или попробуйте очистить кэш браузера.
3. Проблемы с сервером:
- Возможно, сервер отправляет устаревшие данные или не полностью загружает DOM структуру. Проверьте работу сервера и убедитесь, что он корректно отдает данные.
4. Проблемы с CSS или стилями:
- CSS стили могут влиять на отображение элементов в DOM. Убедитесь, что ваши стили не препятствуют корректному рендерингу элементов.
5. Проблемы с браузером:
- Некоторые браузеры могут иметь проблемы с рендерингом DOM элементов из-за ошибок в их реализации. Попробуйте проверить работу вашего кода в другом браузере или обновите текущий до последней версии.
Для отладки проблемы можно использовать инструменты разработчика браузера, чтобы проанализировать, какие запросы отправляются на сервер, какие данные возвращаются, и какие изменения происходят в DOM. Также рекомендуется использовать консоль разработчика для поиска ошибок в JavaScript коде.
Надеюсь, что эти рекомендации помогут вам разобраться с проблемой рендеринга узлов в DOM дереве и исправить ее. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.