Javascript aggiunto all'header del tema restituisce '$ is not defined'

Sviluppatore
1

Ciao,

In Admin > Personalizza > Temi > nella sezione header ho aggiunto quanto segue ma restituisce
Uncaught ReferenceError: $ is not defined

<script>
$(document).ready(function() {
$('.topic-list .topic-excerpt[href=\"/t/urltobechanged/8\"]').attr('href', \"/t/newurltoset/17 \");
});
</script>

Se invece aggiungo quanto segue, allora funziona correttamente senza errori.

<script>
  console.log("Hello, Discourse!");
</script>

Principalmente questo errore $ is not defined si verifica perché jQuery non è caricato, tuttavia gli script dell’header non dovrebbero essere eseguiti per impostazione predefinita dopo il caricamento di jQuery?h.

2

Usa JavaScript nativo, non jQuery.

2 Mi Piace
3

Grazie, ma se questo è javascript, funziona bene quando viene utilizzato nella console dello sviluppatore
document.querySelector('.topic-list .topic-excerpt[href="/t/urltobechanged/8"]').setAttribute('href', "/t/newurltoset/17");

In qualche modo, quando viene caricato dall’header di Discourse, viene restituito come “Uncaught TypeError: document.querySelector(…) is null”, non importa se lo incapsulo con:

function doSomething() {
or
document.addEventListener("DOMContentLoaded", function(event)

Qualche idea su come questa singola riga per cambiare l’attributo href dovrebbe essere eseguita, dato che funziona bene nella console del browser?

4

Poiché Discourse è una SPA, fare affidamento sull’evento “DOMContentLoaded” del documento non sarà molto utile, poiché il DOM del documento è sempre “caricato” ma gli elementi potrebbero mancare. Invece, dovrai usare i Componenti come menzionato da @merefield, o qualcosa di simile a questo: How do you force a script to refire on every page load in Discourse? - #5 by simon. In questo modo, ogni volta che la pagina cambia, il tuo codice può controllare l’elemento che stai cercando di modificare.

1 Mi Piace
5

Va bene, ho capito ora, venendo dallo sviluppo di WordPress/Joomla, pensi che aggiungere JS all’header funzionerebbe allo stesso modo.

Il tuo link fornisce effettivamente una soluzione, nota che ora gli header <script type='text/discourse-plugin'> sono deprecati Modernizing inline script tags for templates & JS API

Per risolvere rapidamente la situazione degli URL, ho finito per creare un permalink direttamente dall’amministratore di Discourse.

Grazie per il supporto e la spiegazione!

1 Mi Piace