Javascriptをテーマヘッダーに追加すると「$ is not defined」が返される

開発
1

質問する前に、まず検索しましたか？右上の🔍を押して検索してください。

「管理」>「カスタマイズ」>「テーマ」>「ヘッダー」セクションに以下を追加しましたが、「Uncaught ReferenceError: $ is not defined」というエラーが返されます。

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

しかし、以下を追加すると、エラーなしで正常に動作します。

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

通常、この「$ is not defined」エラーはjQueryが読み込まれていないために発生しますが、ヘッダースクリプトはデフォルトでjQueryが読み込まれた後に実行されるべきではないのでしょうか？

2

jQueryではなく、ネイティブJavaScriptを使用してください。

「いいね！」 2
3

ありがとうございます。しかし、このJavaScriptは開発者コンソールで使用すると正常に動作します。
document.querySelector('.topic-list .topic-excerpt[href="/t/urltobechanged/8"]').setAttribute('href', "/t/newurltoset/17");

Discourseのヘッダーからロードされると、次のように「Uncaught TypeError: document.querySelector(…) is null」と返されます。これは、次のようにラップしても同様です。

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

このhref属性を変更する単一行を、開発者コンソールでうまく動作するのと同じように実行する方法について、何かアイデアはありますか？

4

DiscourseはSPAであるため、ドキュメントの「DOMContentLoaded」に依存してもあまり役に立ちません。ドキュメントDOMは常に「ロード」されていますが、要素が欠落している可能性があるためです。代わりに、@merefieldが言及したコンポーネントを使用するか、次のようなものを使用する必要があります: How do you force a script to refire on every page load in Discourse? - #5 by simon

「いいね！」 1
5

わかりました、今理解できました。WordPress/Joomlaの開発から来たので、ヘッダーにJSを追加しても同じように機能すると思われたのですね。

提供していただいたリンクは確かに解決策を示しています。ただし、現在 <script type='text/discourse-plugin'> ヘッダーは非推奨になっていることに注意してください。Modernizing inline script tags for templates & JS API

URLの問題を迅速に解決するために、最終的にはDiscourse管理画面から直接パーマリンクを設定しました。

サポートと説明をありがとうございました！

「いいね！」 1