Issue to Javascript

Question

Issue to Javascript

Scott Huang 3,366

Hi,

Further to

https://learn.microsoft.com/en-us/answers/questions/5549140/javascript-issue

the sample below was not working well. Can you help?

Anonymous

2025-12-22T10:24:25.73+00:00

Hi Peter_1985, would you mind show your debug log so i can have an insight about this case?
Scott Huang 3,366 Reputation points

2025-12-22T15:44:50.3233333+00:00

Hi Raymond,

The issue is that it is showing the expected output. Can you refer to my previous thread?

Answer accepted by question author

1 additional answer

Your answer

Anonymous

2025-12-22T10:24:25.73+00:00

Hi Peter_1985, would you mind show your debug log so i can have an insight about this case?
Scott Huang 3,366 Reputation points

2025-12-22T15:44:50.3233333+00:00

Hi Raymond,

The issue is that it is showing the expected output. Can you refer to my previous thread?

Answer 1

As I've stated above you're missing the required files/code for this to work. After reading through your code this time, I think my assumption was correct, there is currently no implementation of the reaction popup aside from a box pop up. for simplicity, I suggest adding these 2 files below and change your WebForm1.aspx logic. Then through this logic, you can try to implement the same for your Webform1B page

`Scripts/reactions.js`


// ============================================

// REACTIONS MODULE

// Teams-style hover reactions popup

// ============================================

(function (window, document) {

    'use strict';

    // ============================================

    // CONFIGURATION - Change emojis globally here

    // ============================================

    var DEFAULT_REACTIONS = [

        { emoji: String.fromCodePoint(0x1F44D), label: 'Like' },      // 👍

        { emoji: String.fromCodePoint(0x1F602), label: 'Laugh' },     // 😂

        { emoji: String.fromCodePoint(0x1F62E), label: 'Wow' },       // 😮

        { emoji: String.fromCodePoint(0x1F622), label: 'Sad' },       // 😢

        { emoji: String.fromCodePoint(0x1F621), label: 'Angry' }      // 😡

    ];

    // ============================================

    // Initialize reactions on all containers

    // ============================================

    function initializeReactions(containerSelector, reactions) {

        containerSelector = containerSelector || '[data-reactions]';

        reactions = reactions || DEFAULT_REACTIONS;

        var containers = document.querySelectorAll(containerSelector);

        for (var i = 0; i < containers.length; i++) {

            var container = containers[i];

            // Skip if already initialized

            if (container.querySelector('.reaction-bar')) continue;

            // Create reaction bar

            var reactionBar = document.createElement('div');

            reactionBar.className = 'reaction-bar';

            // Add reaction buttons

            for (var j = 0; j < reactions.length; j++) {

                var reaction = reactions[j];

                var btn = document.createElement('button');

                btn.className = 'reaction-btn';

                btn.setAttribute('data-emoji', reaction.emoji);

                btn.setAttribute('title', reaction.label);

                btn.textContent = reaction.emoji;

                btn.addEventListener('click', handleReactionClick);

                reactionBar.appendChild(btn);

            }

            // Add the "+" button for more reactions

            var addBtn = document.createElement('button');

            addBtn.className = 'add-reaction-btn';

            addBtn.textContent = '+';

            addBtn.addEventListener('click', handleAddReactionClick);

            reactionBar.appendChild(addBtn);

            container.appendChild(reactionBar);

        }

    }

    // ============================================

    // Event Handlers

    // ============================================

    function handleReactionClick(e) {

        e.stopPropagation();

        var emoji = this.getAttribute('data-emoji');

        var messageContainer = findParentWithAttribute(this, 'data-reactions');

        if (messageContainer) {

            console.log('Reacted with: ' + emoji);

            addReactionToMessage(messageContainer, emoji);

        }

    }

    function handleAddReactionClick(e) {

        e.stopPropagation();

        console.log('Add more reactions clicked');

        alert('Emoji picker would open here!');

    }

    // ============================================

    // Helper: Find parent with attribute

    // ============================================

    function findParentWithAttribute(element, attribute) {

        while (element && element !== document) {

            if (element.hasAttribute(attribute)) {

                return element;

            }

            element = element.parentNode;

        }

        return null;

    }

    // ============================================

    // Add reaction display to message

    // ============================================

    function addReactionToMessage(messageContainer, emoji) {

        var reactionsContainer = messageContainer.querySelector('.selected-reactions');

        if (!reactionsContainer) {

            reactionsContainer = document.createElement('div');

            reactionsContainer.className = 'selected-reactions';

            messageContainer.appendChild(reactionsContainer);

        }

        var existingReaction = reactionsContainer.querySelector('[data-reaction-emoji="' + emoji + '"]');

        if (existingReaction) {

            var countSpan = existingReaction.querySelector('.reaction-count');

            var currentCount = parseInt(countSpan.textContent, 10) || 1;

            countSpan.textContent = currentCount + 1;

        } else {

            var reactionElement = document.createElement('span');

            reactionElement.className = 'selected-reaction';

            reactionElement.setAttribute('data-reaction-emoji', emoji);

            reactionElement.innerHTML = emoji + ' <span class="reaction-count">1</span>';

            reactionElement.addEventListener('click', function () {

                var countSpan = this.querySelector('.reaction-count');

                var currentCount = parseInt(countSpan.textContent, 10) || 1;

                if (currentCount > 1) {

                    countSpan.textContent = currentCount - 1;

                } else {

                    this.parentNode.removeChild(this);

                    if (reactionsContainer.children.length === 0) {

                        reactionsContainer.parentNode.removeChild(reactionsContainer);

                    }

                }

            });

            reactionsContainer.appendChild(reactionElement);

        }

    }

    // ============================================

    // Auto-initialize on DOM ready

    // ============================================

    function onDOMReady(fn) {

        if (document.readyState !== 'loading') {

            fn();

        } else {

            document.addEventListener('DOMContentLoaded', fn);

        }

    }

    onDOMReady(function () {

        initializeReactions();

    });

    // ============================================

    // Expose for custom usage

    // ============================================

    window.ReactionsModule = {

        init: initializeReactions,

        defaultReactions: DEFAULT_REACTIONS

    };

})(window, document);

`Content/reactions.css`


/* ============================================

   REACTIONS MODULE STYLES

   Teams-style hover reactions popup

   ============================================ */

/* Container needs relative positioning for the popup */

[data-reactions] {

    position: relative;

}

/* Reaction bar - hidden by default */

.reaction-bar {

    display: none;

    position: absolute;

    bottom: 100%;  /* Position above the container - THIS IS THE KEY CHANGE */

    margin-bottom: 8px;  /* Space between popup and message */

    left: 0;

    background: white;

    border: 1px solid #ddd;

    border-radius: 14px;  /* Reduced from 20px to match smaller size */

    padding: 2px 4px !important;  /* Reduced from 1px 2px */

    box-shadow: 0 2px 8px rgba(0,0,0,0.15);

    z-index: 1000;

    opacity: 0;

    transform: translateY(10px);

    transition: opacity 0.2s, transform 0.2s;

    height: auto !important;  /* Force height to fit content only */

    max-height: 32px !important;  /* Limit maximum height */

    overflow: visible !important;  /* Don't clip anything */

}

/* Invisible bridge to connect reaction bar to container */

.reaction-bar::after {

    content: '';

    position: absolute;

    top: 100%;  /* Position below the bar */

    left: 0;

    width: 100%;

    height: 8px;  /* Small bridge - changed back from 100px */

    background: transparent;

}

/* Show reaction bar on hover with flex layout */

[data-reactions]:hover .reaction-bar {

    display: flex;

    align-items: center;

    gap: 2px;  /* Reduced from 4px */

    opacity: 1;

    transform: translateY(0);

}

/* Reaction button styling */

.reaction-btn {

    background: none !important;

    border: none !important;

    font-size: 14px !important;  /* Reduced from 16px - MAKES EMOJIS SMALLER */

    cursor: pointer;

    padding: 2px !important;  /* Reduced from 4px - MAKES BOX SHORTER */

    border-radius: 50% !important;

    transition: background-color 0.2s, transform 0.2s;

    line-height: 1 !important;

    height: auto !important;  /* Don't inherit height */

    min-height: 0 !important;  /* Remove any min-height */

    width: auto !important;  /* Don't inherit width */

    margin: 0 !important;  /* Remove any margin */

}

.reaction-btn:hover {

    background-color: #f0f0f0;

    transform: scale(1.2);

}

.reaction-btn:focus {

    outline: none;

    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.3);

}

/* Add reaction button (+) */

.add-reaction-btn {

    background: none !important;

    border: 1px solid #ddd !important;

    border-radius: 50% !important;

    width: 20px !important;  /* Reduced from 24px */

    height: 20px !important;  /* Reduced from 24px - MAKES PLUS BUTTON SMALLER */

    cursor: pointer;

    font-size: 10px !important;  /* Reduced from 12px */

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform 0.2s;

    line-height: 1 !important;

    padding: 0 !important;  /* Remove all padding */

    margin: 0 !important;  /* Remove all margin */

    min-height: 0 !important;  /* Remove any min-height */

}

.add-reaction-btn:hover {

    transform: scale(1.2);

}

.add-reaction-btn:focus {

    outline: none;

    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.3);

}

/* Selected reaction display */

.selected-reactions {

    display: flex;

    gap: 4px;

    margin-top: 8px;

    flex-wrap: wrap;

}

.selected-reaction {

    background-color: #e8f4fd;

    border: 1px solid #0078d4;

    border-radius: 12px;

    padding: 2px 8px;

    font-size: 14px;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    cursor: pointer;

    transition: background-color 0.2s;

}

.selected-reaction:hover {

    background-color: #d0e8f8;

}

.reaction-count {

    font-size: 12px;

    color: #666;

}

`WebForm1.aspx`


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Chat0_1b.WebForm1" %>

<!DOCTYPE html>

<html>

<head>

    <title>SignalR Simple Chat</title>

    <link href="Content/reactions.css" rel="stylesheet" type="text/css" />

    <style type="text/css">

        body {

            padding:0px;

            margin:0px;

        }

        .container {

            display: flex;

            height: 100vh;

            width: 100vw;

            margin: 0;

        }

        .section {

            flex: 1;

            border: 4px hidden #00008B;

            border-radius: 8px;

            padding: 20px;  /* Increased from 8px to give space for popup */

            background-color: lightblue;

            box-sizing: border-box;

            overflow: visible;  /* Important: allow popup to show outside */

        }

        .message-item {

            margin: 15px 0;

            padding: 10px;

            background: white;

            border-radius: 5px;

            overflow: visible;  /* ← ADD THIS */

        }

        .section h2 {

            margin-top: 0;

        }

        .form-group {

            margin-bottom: 15px;

        }

        .form-group label {

            display: block;

            margin-bottom: 5px;

        }

        .form-group input,

        .form-group select {

            width: 100%;

            padding: 8px;

            box-sizing: border-box;

    }

        .form-group input[type="radio"] {

            width: auto;

            margin-right: 10px;

        }

        button {

            display: block;

            margin: 20px auto;

            padding: 10px 20px;

            background-color: #007BFF;

            color: white;

            border: none;

            cursor: pointer;

        }

        button:hover {

            background-color: #0056b3;

        }

        .message-text {

            margin: 0;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="section">

            <h2>Personal Details</h2>

            <div class="form-group" >

            </div>

            <div class="form-group">

            </div>

            <div class="form-group">

            </div>

            <div class="form-group">

            </div>

            <div class="form-group">

            </div>

        }

        <div class="section">

            <h2>Messages</h2>

            <div class="message-item" data-reactions>

                <p class="message-text">Your message text here</p>

            </div>

            <div class="message-item" data-reactions>

                <p class="message-text">Another message example</p>

            </div>

        </div>

        <div class="section">

            <h2>Address & Employment</h2>

            <div class="form-group">

            </div>

            <div class="form-group">

            </div>

            <div class="form-group" >

            </div>

            <div class="form-group" >

            </div>

            <div class="form-group" >

            </div>

        </div>

        <div class="section">

            <h2>Emergency Contact & Notes</h2>

            <div class="form-group" >

            </div>

            <div class="form-group" >

            </div>

            <div class="form-group" >

            </div>

            <div class="form-time">

            </div>

        </div>

    </div>

    <script src="Scripts/reactions.js" type="text/javascript"></script>

</body>

</html>

Danny Nguyen (WICLOUD CORPORATION) 6,620 Reputation points Microsoft External Staff Moderator

2025-12-24T08:05:20.23+00:00

Hi @Scott Huang ,

I take a look through your project structure (as stated the files are password locked), your screen shot and the code from Raymond.

I suspect the problem is that you haven't implemented or linked the Javascripts that handle the react popup logic, therefore in the picture you linked, the pop up appears to be blank.

You need to properly load the javascript file that handle the react logic like Raymond has specified (I'll call it reactions.js) and load it into your project like this:

bundles.Add(new ScriptBundle("~/bundles/reactions").Include("~/Scripts/reactions.js"));
Scott Huang 3,366 Reputation points

2025-12-24T13:00:43.2033333+00:00

Danny,

Can you re-check it? Thanks a lot.
Danny Nguyen (WICLOUD CORPORATION) 6,620 Reputation points Microsoft External Staff Moderator

2025-12-25T06:38:33.36+00:00

the result should look like this

Answer 2

To assist you with your JavaScript issue, it would be helpful to know more specifics about the problem you're encountering. However, here are some general troubleshooting steps you can take:

Check the Console for Errors: Open the browser's Developer Tools (usually F12) and check the Console tab for any JavaScript errors that may provide clues about what is going wrong.
Debugging with DevTools: Use the debugging features in your browser's DevTools to set breakpoints and step through your code. This can help you identify where the logic may be failing.
Reproduce the Issue: Ensure that you can consistently reproduce the issue by following the same steps each time. This will help you identify if there are specific conditions that lead to the problem.
Check for Syntax Errors: Use a code editor with linting capabilities to check for syntax errors in your JavaScript code. Tools like ESLint can help identify common issues.
Disable Extensions: If you are using a browser extension that might interfere with JavaScript execution, try disabling them temporarily to see if that resolves the issue.

If you provide more details about the specific code or error messages you're encountering, I can give more targeted advice.

References:

Share via

Issue to Javascript

Scripts/reactions.js

Content/reactions.css

WebForm1.aspx

1 additional answer

Your answer

`Scripts/reactions.js`

`Content/reactions.css`

`WebForm1.aspx`