kittycaticus
New member
I'm working on this widget. It correctly links to threads that meet the conditions, however it only displays the Prefix (correctly with formatting), not the thread title. Any ideas what I'm doing wrong? I want it to display the prefix and the thread title, linked to the thread.
Code:
<div id="rp-open-threads">
<ul class="rp-thread-list">
<li class="rp-loading">Loading open threads…</li>
</ul>
</div>
<script>
(function () {
const FORUM_URL = '/forums/9/';
const list = document.querySelector('#rp-open-threads .rp-thread-list');
if (!list) return;
fetch(FORUM_URL, { credentials: 'same-origin' })
.then(r => r.text())
.then(html => {
list.innerHTML = '';
const doc = new DOMParser().parseFromString(html, 'text/html');
const threads = doc.querySelectorAll('.structItem--thread');
threads.forEach(thread => {
const titleLink = thread.querySelector('.structItem-title a');
const prefixEl = thread.querySelector('.label');
const replyEl = thread.querySelector('.structItem-cell--meta dd');
if (!titleLink || !replyEl) return;
const replies = parseInt(replyEl.textContent.trim(), 10) || 0;
const prefixText = prefixEl ? prefixEl.textContent.trim() : '';
const allowed =
(prefixText === '1v1' && replies === 0) ||
(prefixText === '1vM' && replies <= 2);
if (!allowed) return;
const li = document.createElement('li');
const a = document.createElement('a');
a.href = titleLink.href;
// Native prefix (once)
if (prefixEl) {
a.appendChild(prefixEl.cloneNode(true));
a.appendChild(document.createTextNode(' '));
}
// Canonical title
const cleanTitle =
titleLink.getAttribute('title') ||
titleLink.textContent.replace(prefixText, '').trim();
a.appendChild(document.createTextNode(cleanTitle));
li.appendChild(a);
list.appendChild(li);
});
if (!list.children.length) {
list.innerHTML = '<li class="rp-empty">Sorry, there are no open threads right now.</li>';
}
})
.catch(err => {
console.error(err);
list.innerHTML = '<li class="rp-error">Unable to load threads.</li>';
});
})();
</script>