Come aggiornare un widget specifico dopo aver ricevuto dati da ajax

Sviluppatore
1

Ciao, ho provato a implementare una barra di navigazione personalizzata per il mio sito Discourse e di seguito trovi il mio codice:

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

Attualmente devo accedere manualmente a un altro link per far apparire gli elementi della barra di navigazione appena aggiunti. Come posso ricaricare la barra di navigazione dopo aver ottenuto i valori dall’AJAX?

Grazie.

2

Il problema qui è che il tuo codice per aggiungere le nuove voci di navigazione viene eseguito solo dopo che la richiesta AJAX è stata completata. Quindi, nei pochi millisecondi necessari per questo, viene visualizzata la navigazione predefinita (non modificata). Ecco perché la vedi nella visualizzazione iniziale della pagina.

Una volta che navighi verso un’altra pagina, la richiesta sarà già stata completata e le tue modifiche inizieranno a funzionare.

Per rispondere alla tua domanda, sì, puoi rendere condizionalmente di nuovo un componente.

Detto questo, non è davvero la risposta che stai cercando. Non hai nemmeno bisogno della richiesta AJAX. Puoi ottenere l’elenco delle categorie direttamente dall’applicazione. Questo risolve il tuo problema e ti fa risparmiare una richiesta HTTP aggiuntiva. Prova qualcosa del genere (basato sul tuo codice).

// ricerca delle categorie
const categoryList = api.container.lookup("site:main").categories;

// aggiungi una voce di navigazione per ogni categoria
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

Grazie, Joe. Ora funziona molto bene.