1

Excuse me if my question is not well asked, I will explain the problem. I have an element <div class="o_notification_manager"></div> that appears after an uncertain time on the screen to display notifications. I want to make changes on this element as soon as it is displayed.

I thought of something like this with jquery

$(document.querySelector('.o_notification_manager')).ready(function() {
    console.log(document.querySelector('.o_notification_manager').innerHTML);
});

But I get this error enter image description here

When I use the setTimeout() or setInterval() function, I get two error cases:

  • Either my code runs before the element is displayed and I get the previous error;
  • or my code runs after the element is displayed and the user sees the element change (he sees the content change, the width change). I want my code to run at the same time as the element is displayed. Any help is welcome.
  • 1
    Use a MutationObserver - see the duplicate for details and examples – Rory McCrossan Jul 12 '22 at 09:52
  • 1
    Your best solution would be to hook into any events provided by the notification manager (if it's your manager, then add some), eg a "beforeShow" or "onshow" type event. If not possible, then MutationObserver as noted above. – freedomn-m Jul 12 '22 at 09:53
  • 1
    Regarding your error - you just need to add a check if it exists before making changes, if not loop again - but timeouts are more of a "hack" rather than a robust solution. – freedomn-m Jul 12 '22 at 09:54
  • Thanks to you, your comments help me. I proceeded as follows: var observer = new MutationObserver(_=> { if (document.contains($('div.o_notification_manager')[0])) { const bodyWidth = $('body').css('width'); let targetNode = document.querySelector('div.o_notification_manager'); targetNode.style.width = bodyWidth; } }); observer.observe(mutationObject.target, {attributes: false, childList: true, characterData: true, subtree:true});` ` – DONGMO BERNARD GERAUD Jul 14 '22 at 09:50

0 Answers0