Javascript issue

Thank you Peter_1985 for the update. I’ll wait for your follow-up.

I put the codes on the page. How to ensure that that is working as expected with the relevant text message item?

Hello Peter_1985, quick note before the details: the snippet below is only an example pattern to illustrate structure and event delegation. It won’t be a drop‑in for your app as‑is. You’ll still need to adapt the selectors, IDs, and data flow to your own DOM and backend.

To make the reactions attach to the correct text message and work reliably (including for dynamically added messages), use this structure and event delegation:

• Wrap each message in a message-container with position: relative.
• Keep the .reaction-bar inside that same container.
• Use a unique data-message-id on the container if you need to identify which message was reacted to.
• Attach ONE click listener to the parent chat list, not per-button.

Event delegation (works for dynamic items):

const chatList = document.getElementById('chat-list');
 
chatList.addEventListener('click', (event) => {
  const button = event.target.closest('.reaction-btn, .add-reaction-btn');
  if (!button) return;
 
  const container = button.closest('.message-container');
  if (!container) return;
 
  const messageId = container.getAttribute('data-message-id') || '';
  const emoji = button.classList.contains('reaction-btn')
    ? button.getAttribute('data-emoji')
    : 'ADD';
 
  console.log('Reaction:', { messageId, emoji });
  // Integrate with YOUR app here: update UI/state, send to server, etc.
});

Again, this is a reference implementation. Please adapt it to your project structure and data model.

Hi Peter_1985, have you solved this problem?

Good day Raymond,

Sorry to that I have not got the expected effect to show that on the text showed on the page.

Hi Peter_1985,
Please share your codes so i can identify the problem!

Good day,

Do you get that?

Hi Peter_1985 ,

I reviewed your page and wired the hover reactions directly onto the messages you render (not the editor). The key is: show the reaction bar only when the mouse hovers a message, and use event delegation so newly added messages also work.

1. Structure each rendered message like this

<div class="message-container" data-message-id="msg_123">
<div class="message-text">This is the message text</div>
<div class="reaction-bar">
<button class="reaction-btn" data-emoji="👍">👍</button>
<button class="reaction-btn" data-emoji="❤️">❤️</button>
<button class="reaction-btn" data-emoji="😂">😂</button>
<button class="reaction-btn" data-emoji="😮">😮</button>
<button class="add-reaction-btn">+</button>
</div>
</div>

2. Minimal CSS (hover to reveal, smooth in/out)

.message-container { position: relative; display: inline-block; }
.reaction-bar {
  display: none; position: absolute; top: -40px; left: 0;
  background: #fff; border: 1px solid #ddd; border-radius: 20px;
  padding: 4px 8px; box-shadow: 0 2px 8px rgba(0,0,0,.15);
  opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s;
}
.message-container:hover .reaction-bar {
  display: flex; gap: 4px; opacity: 1; transform: translateY(0);
}
.reaction-btn { background:none; border:0; font-size:16px; cursor:pointer; padding:4px; border-radius:50%; }
.reaction-btn:hover { background:#f0f0f0; transform: scale(1.2); }

3. Event delegation (works for dynamic messages)

// Attach once to the parent that contains all messages
const chatList = document.getElementById('table1'); // or your list container
 
chatList.addEventListener('click', (e) => {
  const btn = e.target.closest('.reaction-btn, .add-reaction-btn');
  if (!btn) return;
 
  const container = btn.closest('.message-container');
  if (!container) return;
 
  const messageId = container.getAttribute('data-message-id') || '';
  const emoji = btn.classList.contains('reaction-btn')
    ? btn.getAttribute('data-emoji')
    : 'ADD';
 
  console.log('Reaction:', { messageId, emoji });
  // TODO: Update your UI / send to server
});

4. If you’re generating messages from CKEditor, wrap the submitted text in that structure:

const cleanText = $('<div>').html(editor.getData()).text();
const id = 'msg_' + Date.now();
const html =
  '<div class="message-container" data-message-id="'+id+'">' +
    '<div class="message-text">'+ cleanText +'</div>' +
    '<div class="reaction-bar">' +
      '<button class="reaction-btn" data-emoji="👍">👍</button>' +
      '<button class="reaction-btn" data-emoji="❤️">❤️</button>' +
      '<button class="reaction-btn" data-emoji="😂">😂</button>' +
      '<button class="reaction-btn" data-emoji="😮">😮</button>' +
      '<button class="add-reaction-btn">+</button>' +
    '</div>' +
  '</div>';
$('#table1').append('<tr><td>' + html + '</td></tr>');

Quick checks:

• Hover the rendered message (not the editor) to reveal the bar.
• Ensure .message-container has position: relative.
• Confirm the .reaction-bar is inside the same container.
• Verify your event listener is attached to the parent list/table once.

This mirrors the Teams-like behavior requested and works for messages added dynamically.

Hope this gives you a clean message you can post right away!

Did you check Webform1.aspx? Billions of thanks to your update. I expect to not involve CKEditor for this.

Hi Peter_1985 ,

You're getting the error because your script looks for #chat-list, but your ASPX markup doesn't actually have that element.

Right now:

const chatList = document.getElementById('chat-list');
chatList.addEventListener('click', ...); // chatList is null, throws error

Fix: Add a null check before binding the event listener:

const chatList = document.getElementById('chat-list');
if (chatList) {
   chatList.addEventListener('click', (event) => { ... });
}

This prevents the JavaScript error from occurring when the chat-list element doesn't exist. Your page will load without errors, and if you later decide to add actual chat functionality, the code will automatically work once you include the proper HTML structure.

Note: Your current page appears to be a form layout rather than a chat interface. If you want to actually implement chat functionality, you'll need to add the appropriate HTML elements with message containers and reaction buttons that match your existing CSS styles.

The defensive coding approach (null check) is recommended for production applications to prevent runtime errors when DOM elements might be missing or dynamically loaded.

Many thanks. I will revert on this.

Regarding the listener above, what should be the handler for " { ... }"?

Hi Peter_1985 ,

The { ... } part is just placeholder code where you'd put your actual business logic. Here are some practical examples:

Simple example for testing:

if (chatList) {

chatList.addEventListener('click', (event) => {

    const button = event.target.closest('.reaction-btn, .add-reaction-btn');

    if (!button) return;



    const container = button.closest('.message-container');

    if (!container) return;



    const messageId = container.getAttribute('data-message-id') || '';

    if (button.classList.contains('reaction-btn')) {

        const emoji = button.getAttribute('data-emoji');

        // Simple alert for testing

        alert(`You clicked ${emoji} on message ${messageId}`);

        // Or add visual feedback

        button.style.backgroundColor = '#e3f2fd';

        setTimeout(() => button.style.backgroundColor = '', 300);

    } else {

        // Handle add reaction button

        alert(`Add custom reaction to message ${messageId}`);

    }

});
```This is just an example to get you started! You'll need to implement the actual functionality based on your specific requirements, like how you want to store reactions, update the UI, handle user authentication, etc.

Hi Peter_1985

Have you implemented this yourself?

I had issues on it. Do you show the messages dynamically and that work well to have the buttons available?

Hi Peter_1985 ,

Thanks for following up and testing the sample code. I’d like to mention that the snippets I shared are mainly examples or guidance to illustrate how the logic could be structured.

If you’d like them to work in your specific setup, you’ll need to adjust and test them in your own environment, for example, by checking element selectors, adapting to your HTML, and debugging any runtime issues that appear.

I can help clarify particular parts or offer small adjustments if something’s unclear, but I’m not able to provide full implementation or debugging support beyond that.

Can you have a simple verification, if possible, to show the relevant effect, by the dynamic text, on the project below?

https://1drv.ms/u/c/17ec75244bac022f/EbejT_mkAcpNhYHfHee9RaUBmFhGhtRJUCxDUZFhJJpc-g?e=UmbPWQ