Cómo actualizar un widget específico después de obtener datos de ajax

Desarrollador
1

Hola, he estado intentando implementar una barra de navegación personalizada para mi sitio de Discourse y a continuación está mi código actual:

$.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}`;
        }
      });
    });
  }
);

Ahora tengo que ir manualmente a otro enlace para que se muestren los nuevos elementos de la barra de navegación. ¿Cómo puedo recargar la barra de navegación después de obtener los valores de AJAX?

Gracias.

2 Me gusta
2

El problema aquí es que tu código para agregar los nuevos elementos del menú de navegación solo se ejecuta una vez que se resuelve la solicitud AJAX. Por lo tanto, en los pocos milisegundos que tarda en ocurrir eso, se muestra el menú de navegación predeterminado (sin modificar). Por eso lo ves en la vista inicial de la página.

Una vez que navegas a otra página, la solicitud ya se habrá resuelto y tus cambios comenzarán a funcionar.

Para responder a tu pregunta: sí, puedes volver a representar condicionalmente un componente.

Dicho esto, no es realmente la respuesta que buscas. Ni siquiera necesitas la solicitud AJAX. Puedes obtener la lista de categorías directamente desde la aplicación. Esto soluciona tu problema y te ahorra una solicitud HTTP adicional. Prueba algo como esto (basado en tu código).

// buscar categorías
const categoryList = api.container.lookup("site:main").categories;

// agregar un elemento de menú de navegación para cada categoría
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}`;
    }
  });
});
1 me gusta
3

Gracias, Joe. Ahora funciona muy bien.

2 Me gusta