Javascript im Theme-Header hinzugefügt meldet '$ is not defined'

Entwickler
1

Hallo,

In Admin > Anpassen > Themes > im Header-Bereich füge ich Folgendes hinzu, aber es gibt Folgendes zurück:
Uncaught ReferenceError: $ is not defined

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

Wenn ich jedoch Folgendes hinzufüge, funktioniert es ohne Fehler:

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

Meistens tritt dieser Fehler “$ is not defined” auf, weil jQuery nicht geladen ist. Sollten die Header-Skripte jedoch standardmäßig ausgeführt werden, nachdem jQuery geladen wurde?

2

Verwenden Sie natives JavaScript, nicht jQuery.

3

Danke, aber wenn dies JavaScript ist, funktioniert es einwandfrei, wenn es in der Entwicklerkonsole verwendet wird
document.querySelector('.topic-list .topic-excerpt[href="/t/urltobechanged/8"]').setAttribute('href', "/t/newurltoset/17");

Irgendwie, wenn es aus dem Discourse-Header geladen wird, wird es als „Uncaught TypeError: document.querySelector(…) is null“ zurückgegeben, egal ob ich es mit umschließe:

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

Irgendeine Idee, wie diese einzelne Zeile zum Ändern des href-Attributs ausgeführt werden sollte, da sie in der Entwicklerkonsole einwandfrei funktioniert?

4

Da Discourse eine SPA ist, ist das Verlassen auf das Dokument „DOMContentLoaded“ nicht sehr hilfreich, da das Dokument-DOM immer „geladen“ ist, aber die Elemente fehlen können. Stattdessen sollten Sie Komponenten verwenden, wie @merefield erwähnt hat, oder etwas wie dieses: How do you force a script to refire on every page load in Discourse? - #5 by simon. Auf diese Weise kann Ihr Code jedes Mal, wenn sich die Seite ändert, nach dem Element suchen, das Sie ändern möchten.

5

Alles klar, ich verstehe jetzt, dass Sie denken, das Hinzufügen von JS zum Header würde genauso funktionieren wie bei der Entwicklung von WordPress/Joomla.

Ihr Link bietet tatsächlich eine Lösung. Beachten Sie, dass die \u003cscript type='text/discourse-plugin\u003e-Header jetzt veraltet sind: Modernizing inline script tags for templates & JS API

Um die URL-Situation schnell zu lösen, habe ich schließlich eine permanente Verknüpfung direkt über die Discourse-Administration vorgenommen.

Vielen Dank für die Unterstützung und die Erklärung!