Как обновить конкретный виджет после получения данных через AJAX

Разработка
1

Привет! Я пытаюсь реализовать пользовательскую панель навигации для своего сайта на Discourse, и вот мой код:

  $.ajax("/categories.json").then(
    (data) => {
      data.category_list.categories.map((val) => {
            api.addNavigationBarItem({
            name: val.name,
            displayName: val.name,
            title: val.name,
            href: `/c/${val.slug}`,
            forceActive: (category, args, router) => {
                return router.currentURL === `/c/${val.slug}`;
                }
            })              
        })
        
    }
  );

Теперь мне приходится вручную переходить по другой ссылке, чтобы newly добавленные элементы навигации отобразились. Как можно перезагрузить панель навигации после получения данных через AJAX?
Спасибо!

2

Проблема здесь в том, что ваш код для добавления новых элементов навигации выполняется только после завершения AJAX-запроса. Поэтому в те немногие миллисекунды, которые требуются для этого, отображается навигация по умолчанию (без изменений). Именно поэтому вы видите её при первоначальном просмотре страницы.

Как только вы перейдёте на другую страницу, запрос уже будет выполнен, и ваши изменения начнут работать.

Отвечая на ваш вопрос: да, вы можете условно перерисовывать компонент.

Тем не менее, это не совсем тот ответ, который вы ищете. Вам даже не нужен AJAX-запрос. Вы можете получить список категорий напрямую из приложения. Это решит вашу проблему и сэкономит лишний HTTP-запрос. Попробуйте что-то вроде этого (на основе вашего кода).

// поиск категорий
const categoryList = api.container.lookup("site:main").categories;

// добавление элемента навигации для каждой категории
categoryList.map(val => {
  api.addNavigationBarItem({
    name: val.name,
    displayName: val.name,
    title: val.name,
    href: `/c/${val.slug}`,
    forceActive: (category, args, router) => {
      return router.currentURL === `/c/${val.slug}`;
    }
  });
});
3

Спасибо, Джо, сейчас всё работает очень хорошо.