Добавление 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

2

Используйте нативный JavaScript, а не jQuery.

(Но даже в этом случае имейте в виду, что Discourse — это SPA PWA, поэтому могут возникать условия гонки, если вы полагаетесь на то, что определенные элементы уже отрисованы. Решение этой проблемы — использование компонентов Ember, рендеримых в конкретных плагин-выходах, в сочетании с модификаторами).

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() {

или

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. Таким образом, при каждом изменении страницы ваш код сможет проверять наличие элемента, который вы пытаетесь изменить.

5

Хорошо, теперь я понял. Приходя из мира разработки на WordPress/Joomla, вы думали, что добавление JS в заголовок будет работать так же.

Ваша ссылка действительно предлагает решение, но обратите внимание, что теперь заголовки <script type='text/discourse-plugin'> устарели: Modernizing inline script tags for templates & JS API

Чтобы быстро решить проблему с URL, я в итоге создал постоянную ссылку напрямую через админ-панель Discourse.

Спасибо за поддержку и разъяснения!