ג'אווהסקריפט בכותרת התבנית מחזיר '$ אינו מוגדר'

מפתח

סיכום מבוסס בינה מלאכותית

A user, opcourdis, is attempting to add Javascript to the theme header in Discourse to modify a topic’s URL, but encounters a “$ is not defined” error, indicating jQuery is not loaded. The code works in the developer console but fails when added to the header. merefield suggests using native Javascript and cautions about race conditions due to Discourse being a Single Page Application (SPA). opcourdis further notes that document.querySelector returns null when used in the header, even when wrapped in DOMContentLoaded. Alteras explains that DOMContentLoaded is unreliable in a SPA and suggests using Components or a method to refire the script on every page load https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/5?silent=true. opcourdis realizes that adding Javascript to the header doesn’or work as expected due to the different architecture compared to CMS platforms like Wordpress and ultimately resolves the issue by changing the permalink directly from the Discourse admin interface. They also acknowledge deprecated <script type='text/discourse-plugin> headers https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482.

1

Hi,

In Admin > Customize > Themes > in the header section I add the following but it returns
Uncaught ReferenceError: $ is not defined

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

If I add the following though, then it it works fine without error.

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

Mostly this $ is not defined error occurs because jQuery is not loaded, however shouldn’t the header scripts be by default executed after jQuery is loaded?h.

2

השתמש ב-JavaScript טבעי, לא ב-jQuery.

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

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.

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 !