C#•5d ago

Dynamically creating rows inside of document.createElement() isn't working with a template?

For some reason, I've managed to make a button that creates a new reply for the user and that works! But when I load from the database that same function for creating the button doesn't work?

function createReplyElement(replyText = '') {
    console.log("creating new reply with text: ", replyText);
    const template = document.getElementById('reply-template').content.cloneNode(true);
    template.querySelector('.reply-text').innerText = replyText;
    console.log("Returning: ", template)
    return template;
}

function createReplyElement(replyText = '') {
    console.log("creating new reply with text: ", replyText);
    const template = document.getElementById('reply-template').content.cloneNode(true);
    template.querySelector('.reply-text').innerText = replyText;
    console.log("Returning: ", template)
    return template;
}

Like the button .new-reply-btn works when I click it, it makes it properly

document.addEventListener('click', function(event) {
    if (event.target.matches('.delete-btn')) {
        const listItem = event.target.closest('li');
        listItem.remove();
    } else if (event.target.matches('.new-reply-btn')) {
        const listItem = event.target.parentElement;
        const newItem = createReplyElement();
        listItem.parentElement.insertBefore(newItem, listItem);
    }
});

document.addEventListener('click', function(event) {
    if (event.target.matches('.delete-btn')) {
        const listItem = event.target.closest('li');
        listItem.remove();
    } else if (event.target.matches('.new-reply-btn')) {
        const listItem = event.target.parentElement;
        const newItem = createReplyElement();
        listItem.parentElement.insertBefore(newItem, listItem);
    }
});

When the commands section loads, it gets the data from the DB correctly

document.addEventListener('DOMContentLoaded', () => {
    const clickableRows = document.querySelectorAll('.clickable-row');
    clickableRows.forEach(row => {
        row.addEventListener('click', () => toggleCommandDetails(row));
    });
    
    showContent('moderation'); // The default tab to have open
});

function showContent(contentId) {
    const contents = document.querySelectorAll('.content');
    contents.forEach(content => {
        content.style.display = 'none';
    });

    document.getElementById(contentId).style.display = 'block';

    if (contentId === 'commands') {
        fetchCommands();
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const clickableRows = document.querySelectorAll('.clickable-row');
    clickableRows.forEach(row => {
        row.addEventListener('click', () => toggleCommandDetails(row));
    });
    
    showContent('moderation'); // The default tab to have open
});

function showContent(contentId) {
    const contents = document.querySelectorAll('.content');
    contents.forEach(content => {
        content.style.display = 'none';
    });

    document.getElementById(contentId).style.display = 'block';

    if (contentId === 'commands') {
        fetchCommands();
    }
}

So for each commend it loads from the DB I try to add a new row (Which works)

commands.forEach(command => addNewCommand(command));

commands.forEach(command => addNewCommand(command));

But when I loop through all the replies inside of

    const newDetailsRow = document.createElement('tr');
    newDetailsRow.classList.add('command-details');
    newDetailsRow.style.display = 'none';
    newDetailsRow.innerHTML =

    const newDetailsRow = document.createElement('tr');
    newDetailsRow.classList.add('command-details');
    newDetailsRow.style.display = 'none';
    newDetailsRow.innerHTML =

It doesn't seem to work when I call createReplyElement here

<ul class="replies-list">
    ${command.replies.filter(reply => reply.replyType === 'General')
        .map(reply => createReplyElement(reply.replyText))
        .join('')}
    <li><button class="new-reply-btn">New Reply</button></li>
</ul>

<ul class="replies-list">
    ${command.replies.filter(reply => reply.replyType === 'General')
        .map(reply => createReplyElement(reply.replyText))
        .join('')}
    <li><button class="new-reply-btn">New Reply</button></li>
</ul>

Here is the template

<template id="reply-template">
    <li>
        <div contenteditable="true" class="reply-text"></div>
        <button class="delete-btn">x</button>
    </li>
</template>

<template id="reply-template">
    <li>
        <div contenteditable="true" class="reply-text"></div>
        <button class="delete-btn">x</button>
    </li>
</template>

1 Reply

MoonlitOP•5d ago

${command.replies.filter(reply => reply.replyType === 'General')
.map(reply => `<li><div contenteditable="true" class="reply-text">${reply.replyText}</div><button class="delete-btn">x</button></li>`)
.join('')}

${command.replies.filter(reply => reply.replyType === 'General')
.map(reply => `<li><div contenteditable="true" class="reply-text">${reply.replyText}</div><button class="delete-btn">x</button></li>`)
.join('')}

So for now I replaced it with this and it works... I'd much rather use the template but if nobody is able to explain how to fix the template thingy, at least it's working

Gaming

Programming

Dynamically creating rows inside of document.createElement() isn't working with a template?