Comment actualiser un widget particulier après avoir obtenu des données d'ajax

Dev
1

Bonjour, j’essaie d’implémenter une barre de navigation personnalisée pour mon site Discourse. Voici mon code actuel :

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

Actuellement, je dois me rendre manuellement sur un autre lien pour que les nouveaux éléments de navigation ajoutés s’affichent. Comment puis-je recharger la barre de navigation après avoir récupéré les valeurs via AJAX ?

Merci.

2 « J'aime »
2

Le problème ici est que votre code pour ajouter les nouveaux éléments de navigation ne s’exécute qu’une fois la requête AJAX résolue. Ainsi, pendant les quelques millisecondes nécessaires à cette résolution, la barre de navigation par défaut (non modifiée) s’affiche. C’est pourquoi vous la voyez lors de la première visualisation de la page.

Une fois que vous naviguez vers une autre page, la requête aura été résolue et vos modifications commenceront alors à fonctionner.

Pour répondre à votre question, oui, vous pouvez conditionnellement réafficher un composant.

Cela dit, ce n’est pas vraiment la réponse que vous recherchez. Vous n’avez même pas besoin de la requête AJAX. Vous pouvez obtenir la liste des catégories directement depuis l’application. Cela résout votre problème et vous évite une requête HTTP supplémentaire. Essayez quelque chose comme ceci (basé sur votre code).

// rechercher les catégories
const categoryList = api.container.lookup("site:main").categories;

// ajouter un élément de navigation pour chaque catégorie
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 « J'aime »
3

Merci Joe, cela fonctionne très bien maintenant.

2 « J'aime »