LeptonX Theme ver 10.5.0, add a notification badge on sidebar menu, the DOM cannot update #10806

4 Answer(s)

• 

  0

  AI-Bot created 2 months ago

  Support Team ABP Agent

  • In LeptonX (MVC) the topbar/sidebar UI pieces are re-initialized after partial page updates (ABP’s dynamic DOM updates / SPA-like navigation). When that happens, LeptonX can replace (or re-render) the menu/link/badge elements, so the elements you updated are no longer the “live” ones. The symptom is exactly what you described: you see the visual DOM once, but later your updates don’t reflect, because you’re updating a stale node or your changes are overwritten by the theme’s initializer.

  • Fix: Treat LeptonX-rendered DOM as disposable and always re-apply your badge/list rendering after ABP DOM updates using ABP’s DOM API, and always query the DOM at the time you update (never cache element references). Concretely:

    1. Wrap all your “apply UI state” into a single function (applyUnreadCountToDom).
    2. Call it after every fetch and inside abp.dom.onNodeAdded (ABP DOM API) so it runs when LeptonX/ABP re-adds the toolbar node.
    3. Avoid duplicate IDs across re-renders; scope your selector under #notification-bar (you already started doing this—keep it everywhere, including #NotificationNewBadge, which can also become duplicated if the toolbar re-renders).

  Here is the minimal pattern that works reliably with LeptonX + ABP dynamic DOM updates (drop-in concept; adapt into your current script):

  <script>
  (function () {
    'use strict';
  
    var state = { unread: 0 };
  
    function applyUnreadCountToDom() {
      // Always re-query (never keep old references)
      var bar = document.getElementById('notification-bar');
      if (!bar) return;
  
      var badge = bar.querySelector('.menu-item-badge');
      if (badge) {
        badge.setAttribute('data-count', state.unread);
        badge.textContent = state.unread > 99 ? '99+' : String(state.unread);
  
        // If your CSS uses opacity/visibility, toggle them here too (optional)
        if (state.unread > 0) {
          badge.style.opacity = '1';
          badge.style.visibility = 'visible';
        } else {
          badge.style.opacity = '0';
          badge.style.visibility = 'hidden';
        }
      }
  
      // IMPORTANT: scope this too (don’t use global #NotificationNewBadge if toolbar can re-render)
      var newBadge = bar.querySelector('#NotificationNewBadge');
      if (newBadge) {
        newBadge.setAttribute('data-count', state.unread);
        newBadge.textContent = state.unread + ' NEW';
        newBadge.style.opacity = state.unread > 0 ? '1' : '0';
        newBadge.style.visibility = state.unread > 0 ? 'visible' : 'hidden';
      }
    }
  
    function fetchCount() {
      if (!window.abp?.ajax) return;
  
      abp.ajax({
        url: (abp.appPath || '') + 'api/notification/private-message/unread-count',
        type: 'GET',
        success: function (response) {
          var num = parseInt((response && response.result != null) ? response.result : response, 10) || 0;
          state.unread = num;
          applyUnreadCountToDom();
        }
      });
    }
  
    // 1) Initial run
    fetchCount();
  
    // 2) Re-apply after ABP adds/replaces DOM nodes (LeptonX/toolbar redraw)
    // This is the key difference vs. only using abp.event / setInterval.
    if (window.abp?.dom?.onNodeAdded) {
      abp.dom.onNodeAdded(function (node) {
        // Only react when our toolbar node is added/replaced
        if (node && node.id === 'notification-bar') {
          applyUnreadCountToDom();
        }
      });
    }
  
    // 3) Polling (as you already do)
    window.__notificationPollTimer = window.__notificationPollTimer || setInterval(fetchCount, 30000);
  })();
  </script>
  

  What this changes vs your current approach:

  • Your current logic mostly relies on abp.event.on('abp.domUpdated', ...). In LeptonX scenarios, the safer hook is ABP DOM API node-added detection (abp.dom.onNodeAdded), because it runs when the actual node is reinserted/replaced, and you immediately re-apply your state to the fresh DOM.
  • It also fixes the common “duplicate IDs after toolbar re-render” issue by scoping everything under #notification-bar.

  If you still want to keep abp.event.on('abp.domUpdated', ...), keep it, but you should still add the abp.dom.onNodeAdded hook above; that’s the part that makes the DOM updates deterministic with LeptonX redraws.

  Sources (verified):

  • https://abp.io/docs/10.5/framework/ui/mvc-razor-pages/javascript-api/dom
  • https://abp.io/docs/10.5/framework/ui/common/leptonx-css-variables

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created 2 months ago

  Support Team Fullstack Developer

  Hi,

  Your JavaScript is actually updating the DOM — it's just updating a copy you can't see, and the badge itself never becomes visible. Three separate things are going on here:

  1. The LeptonX MVC layout renders every toolbar item twice: once in the toolbar and once more inside the hidden mobile menu, and the mobile copy comes first in the DOM. Since your markup uses id attributes, the ids get duplicated and document.getElementById(...) always resolves to the hidden mobile copy — the notification list is injected into the invisible panel while the visible one stays empty.
  2. LeptonX has no data-count based CSS rules, so the inline style="opacity:0;visibility:hidden;" on your badges is never undone. Besides that, the theme only gives .menu-item-badge its badge styling (position, background, size) when the parent link has the active-menu-item class — without that class it's just an unstyled <small> element.
  3. The theme already wraps every toolbar item in <li class="outer-menu-item">. Your component's own outer <li> can't be nested inside it, so the browser closes the theme's <li> early and you end up with an extra empty <li> in the toolbar.

  Here is a corrected Default.cshtml: no ids (all DOM lookups go through classes and update both rendered copies), active-menu-item toggled for the badge styling and d-none for its visibility, no outer <li>, and a guard at the top so the inline script (which is also included twice) only runs once per page:

  <a href="javascript:;" class="lpx-menu-item-link notification-bell" data-lpx-ctx-toggle="notification-bar">
      <span class="lpx-menu-item-icon" style="position:relative;">
          <i class="lpx-icon action-icon bi bi-bell-fill" aria-hidden="true"></i>
          <small class="menu-item-badge notification-count d-none">0</small>
      </span>
  </a>
  
  <div class="lpx-context-menu" data-lpx-context-menu="notification-bar">
      <ul class="lpx-nav-menu-notification notification-menu">
          <li class="outer-menu-item">
              <a class="lpx-menu-item-link lpx-menu-item">
                  <span class="lpx-menu-item-icon">
                      <i class="lpx-icon outer-icon bi bi-bell-fill" aria-hidden="true"></i>
                  </span>
                  <span class="lpx-menu-item-text">Notification
                      <span class="lpx-badge notification-new-badge d-none">0 NEW</span>
                  </span>
                  <span data-lpx-close="notification-bar">
                      <i class="lpx-icon bi bi-x outer-icon dd-icon" aria-hidden="true"></i>
                  </span>
              </a>
          </li>
      </ul>
  
      <div class="lpx-button-container">
          <button class="lpx-button notif-btn-outline notification-mark-all" type="button">Mark all as read</button>
          <a class="lpx-button notif-btn-primary" href="/notification/private-messages">See All Notifications</a>
      </div>
  </div>
  
  
  <script>
  (function() {
      'use strict';
  
      // The theme renders each toolbar item twice (toolbar + mobile menu),
      // so this script is also included twice per page - run it only once.
      if (window.__notificationBadgeInitialized) return;
      window.__notificationBadgeInitialized = true;
  
      var currentUnread = 0;
  
      function unwrap(response) {
          if (response && typeof response === 'object' && 'result' in response) return response.result;
          return response;
      }
  
      function esc(s) {
          return String(s == null ? '' : s).replace(/[&<>"']/g, function(c) {
              return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
          });
      }
  
      function isPanelOpen() {
          return !!document.querySelector('[data-lpx-context-menu="notification-bar"].show');
      }
  
      function updateBadge(count) {
          var num = parseInt(count, 10) || 0;
          currentUnread = num;
  
          document.querySelectorAll('.notification-bell').forEach(function(link) {
              link.classList.toggle('active-menu-item', num > 0);
              var badge = link.querySelector('.notification-count');
              if (badge) {
                  badge.textContent = num > 99 ? '99+' : String(num);
                  badge.classList.toggle('d-none', num <= 0);
              }
          });
  
          document.querySelectorAll('.notification-new-badge').forEach(function(badge) {
              badge.textContent = num + ' NEW';
              badge.classList.toggle('d-none', num <= 0);
          });
      }
  
      function startOfDay(d) { return new Date(d.getFullYear(), d.getMonth(), d.getDate()); }
  
      function groupLabel(date) {
          var today = startOfDay(new Date());
          var yest = new Date(today);
          yest.setDate(today.getDate() - 1);
          if (date >= today) return 'TODAY';
          if (date >= yest) return 'YESTERDAY';
          var dd = String(date.getDate()).padStart(2, '0');
          var mm = String(date.getMonth() + 1).padStart(2, '0');
          return dd + '.' + mm + '.' + date.getFullYear();
      }
  
      function formatTime(date) {
          var hh = String(date.getHours()).padStart(2, '0');
          var mm = String(date.getMinutes()).padStart(2, '0');
          var today = startOfDay(new Date());
          var yest = new Date(today);
          yest.setDate(today.getDate() - 1);
          if (date >= today) return hh + ':' + mm;
          if (date >= yest) return 'Yesterday ' + hh + ':' + mm;
          var dd = String(date.getDate()).padStart(2, '0');
          var mm2 = String(date.getMonth() + 1).padStart(2, '0');
          return mm2 + '/' + dd + ' ' + hh + ':' + mm;
      }
  
      function renderGroups(items) {
          document.querySelectorAll('.notification-menu').forEach(function(menu) {
              menu.querySelectorAll('.notif-group').forEach(function(g) { g.remove(); });
  
              if (!items || !items.length) {
                  var emptyLi = document.createElement('li');
                  emptyLi.className = 'outer-menu-item notif-group';
                  emptyLi.innerHTML = '<div class="lpx-notification-empty">No notifications</div>';
                  menu.appendChild(emptyLi);
                  return;
              }
  
              var groups = [];
              items.forEach(function(it, idx) {
                  var d = new Date(it.creationTime);
                  var label = groupLabel(d);
                  var g = null;
                  for (var j = 0; j < groups.length; j++) {
                      if (groups[j].label === label) { g = groups[j]; break; }
                  }
                  if (!g) { g = { label: label, items: [] }; groups.push(g); }
                  g.items.push({ data: it, unread: idx < currentUnread, date: d });
              });
  
              groups.forEach(function(g) {
                  var li = document.createElement('li');
                  li.className = 'outer-menu-item notif-group';
                  var html = '<div class="lpx-menu-item-title">' + esc(g.label) + '</div>'
                      + '<ul class="lpx-notification-items lpx-inner-menu">';
                  g.items.forEach(function(it) {
                      html += '<li class="lpx-notification-item' + (it.unread ? ' unread' : '') + '" data-id="' + esc(it.data.id) + '">'
                          + '<a class="lpx-notification-item-link">'
                          + '<div class="lpx-notification-member-container"><i class="lpx-notification-member-icon bi bi-bell-fill"></i></div>'
                          + '<div><p class="lpx-notification-text"><span class="lpx-notification-text-highlight">' + esc(it.data.title)
                          + '</span> ' + esc(it.data.content) + '</p>'
                          + '<small class="lpx-notification-text-small">' + esc(formatTime(it.date)) + '</small></div>'
                          + '</a></li>';
                  });
                  html += '</ul>';
                  li.innerHTML = html;
                  menu.appendChild(li);
              });
          });
      }
  
      function fetchLatest() {
          if (typeof abp === 'undefined' || !abp || !abp.ajax) return;
          abp.ajax({
              url: (abp.appPath || '') + 'api/notification/private-message?maxResultCount=5&sorting=CreationTime%20DESC',
              type: 'GET',
              success: function(response) {
                  var data = unwrap(response);
                  var items = (data && data.items) ? data.items : [];
                  renderGroups(items);
              },
              error: function() {}
          });
      }
  
      function fetchCount() {
          if (typeof abp === 'undefined' || !abp || !abp.ajax) return;
          abp.ajax({
              url: (abp.appPath || '') + 'api/notification/private-message/unread-count',
              type: 'GET',
              success: function(response) {
                  var num = parseInt(unwrap(response), 10) || 0;
                  updateBadge(num);
                  if (isPanelOpen()) fetchLatest();
              },
              error: function() {}
          });
      }
  
      function markOneRead(id) {
          if (typeof abp === 'undefined' || !abp || !abp.ajax) return;
          abp.ajax({
              url: (abp.appPath || '') + 'api/notification/private-message/' + id + '/mark-as-read',
              type: 'POST',
              success: function() {
                  document.querySelectorAll('.lpx-notification-item[data-id="' + id + '"]').forEach(function(el) {
                      el.classList.remove('unread');
                  });
                  fetchCount();
              },
              error: function() {}
          });
      }
  
      function markAllRead() {
          if (typeof abp === 'undefined' || !abp || !abp.ajax) return;
          abp.ajax({
              url: (abp.appPath || '') + 'api/notification/private-message/mark-all-as-read',
              type: 'POST',
              success: function() {
                  document.querySelectorAll('.notification-menu .lpx-notification-item.unread').forEach(function(el) {
                      el.classList.remove('unread');
                  });
                  updateBadge(0);
              },
              error: function() {}
          });
      }
  
      window.refreshNotificationBadge = fetchCount;
      window.refreshNotificationList = fetchLatest;
  
      document.addEventListener('click', function(e) {
          if (!e.target || !e.target.closest) return;
  
          if (e.target.closest('[data-lpx-ctx-toggle="notification-bar"]')) {
              fetchLatest();
              return;
          }
  
          if (e.target.closest('.notification-mark-all')) {
              markAllRead();
              return;
          }
  
          var itemEl = e.target.closest('.lpx-notification-item');
          if (itemEl && itemEl.classList.contains('unread') && itemEl.getAttribute('data-id')) {
              itemEl.classList.remove('unread');
              markOneRead(itemEl.getAttribute('data-id'));
          }
      });
  
      function tryInit() {
          if (typeof abp === 'undefined' || !abp || !abp.ajax) return false;
          fetchCount();
          setInterval(fetchCount, 30000);
          return true;
      }
  
      if (!tryInit()) {
          var attempts = 0;
          var readyTimer = setInterval(function() {
              attempts++;
              if (tryInit()) {
                  clearInterval(readyTimer);
              } else if (attempts > 40) {
                  clearInterval(readyTimer);
              }
          }, 500);
      }
  })();
  </script>
  

  Keep data-lpx-ctx-toggle="notification-bar" / data-lpx-context-menu="notification-bar" as they are — notification-bar is the context menu name LeptonX binds automatically inside the toolbar, so the dropdown toggling in the toolbar keeps working. Note this covers the desktop toolbar; the copy inside the mobile menu is kept in sync data-wise, but the dropdown there is not wired up by the theme.

  One more detail for the footer: the theme's lpx-button-container styles a single full-width button (that's also why your notif-btn-outline / notif-btn-primary classes have no effect — they don't exist in LeptonX), so your two buttons overlap. Add this to your styles to stack them properly:

  .lpx-context-menu .lpx-button-container .lpx-button {
      display: block;
      text-align: center;
      text-decoration: none;
      box-sizing: border-box;
  }
  
  .lpx-context-menu .lpx-button-container .lpx-button + .lpx-button {
      margin-top: 8px;
  }
  

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  trendline created 2 months ago

  Great, thanks a lot, detailed and efficient solution, better than AI response

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel

  1
• 

  0

  maliming created 2 months ago

  Support Team Fullstack Developer

  Great

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel