Javascript toegevoegd aan themakoptekst retourneert $ is niet gedefinieerd

Ontwikkelaar
1

Hallo,

In Admin > Customize > Themes > in de headersectie heb ik het volgende toegevoegd, maar het geeft de volgende foutmelding:
Ongeïntercepteerde ReferenceError: $ is niet gedefinieerd

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

Als ik echter het volgende toevoeg, dan werkt het prima zonder foutmelding.

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

Meestal treedt deze $ is not defined fout op omdat jQuery niet geladen is, maar zouden de scripts in de header niet standaard moeten worden uitgevoerd nadat jQuery is geladen?

2

Gebruik native JavaScript, geen jQuery.

(Maar zelfs dan moet u zich ervan bewust zijn dat Discourse een SPA PWA is, dus u kunt racecondities tegenkomen als u afhankelijk bent van het feit dat bepaalde elementen zijn gerenderd - en de oplossing daarvoor is om Ember Components te gebruiken die zijn gerenderd in specifieke plugin-uitgangen in combinatie met modifiers)

2 likes
3

Bedankt, maar als dit javascript is, werkt het prima wanneer het in de ontwikkelaarsconsole wordt gebruikt
document.querySelector('.topic-list .topic-excerpt[href=\"/t/urltobechanged/8\"]').setAttribute('href', \"/t/newurltoset/17\");

Op de een of andere manier, wanneer het vanuit de discourse-header wordt geladen, wordt het geretourneerd als “Uncaught TypeError: document.querySelector(…) is null”, ongeacht of ik het omsluit met:

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

Enig idee hoe deze enkele regel om het href-attribuut te wijzigen moet worden uitgevoerd, aangezien het prima werkt in de dev-console?

4

Since Discourse is an SPA, relying on the document “DOMContentLoaded” won’t be very helpful, since the document DOM is always “loaded” but the elements can be missing. Instead you’ll want to use Components as @merefield mentioned, or something like this: How do you force a script to refire on every page load in Discourse? - #5 by simon. This way every time the page changes, your code can check for the element you’re trying to change.

1 like
5

Allright, I understand now, coming from wordpress/joomla developement, you think adding js to the header would work in the same way.

Your link provides indeed a solution, note that now the <script type='text/discourse-plugin> headers are deprecated Modernizing inline script tags for templates & JS API

To quickly solve the url situation I ended up doing a permalink directly from discourse admin though.

Thank you for the support and explanation !

1 like