Event like "DOMLastNodeRemoved" to prevent multiple executions of code

Question

First of all: I know that there are some questions similar to this, but I could not found any alternative to it, but to ask.

Hello!

Is there any event like "DOMLastNodeRemoved" (or FirstNode, since u can't know for sure when it will be the last node removed) to prevent multiple executions of code?

Here's the deal, I'm using Genexus. The only way to make an event work in this weird SPA concept is using DOMNodeRemoved event. But whenever you click a button, it will insert a lot of nodes, making the function execute like 25 times instead of just one.

Let's go to an example:

I'm currently with this code:

$(document).on("DOMNodeRemoved", function() {
$(".Button").click(function() {
    setTimeout(
        function() {
            toastrgx();
            $('.gx-warning-message').css('display', 'none');
        }, 800);
});
function toastrgx() {

    var meuLoader = new Loader($);
    meuLoader.Insert();

    setTimeout(function() {
        meuLoader.Remove();
        var text = $('.gx-warning-message').text();
        toastr.error(text, '');

    }, 500);

    };
});

I need to use timeout because the DOM is still loading up the message.

Anyways, with this code I'll get this result presented in the image:

If i use something like preventPropagation (at least the way I used) it will run my code only once, but returns a lot of errors in the console (one for each execution) and also breaks my loader. BTW, I have power only over one custom script, everything else is generated by Genexus.
So, if I use any other normal event like document.ready, it will fire the first time I load a page within my MasterPage, but, if I click in any other page, it will not fire the event again.

So, my question is:

There is any way to execute a code only once in my case?
Is it something that I'm not seeing clearly like another event or another way to make the code work?

If the question sounds silly, sorry, i'm a newbie in JS.

Answer 1

The way to go in this case is creating a User Control and using its show function, that is executed by the generated application every time the control should update (for example, when the page is loaded or when a property of the control is modified).

Why a User Control?

User Controls offer a standard interface to interoperate with GeneXus generated applications. This interface is well documented and abstracts you from the inner workings of the generated applications.

If you try to extend GeneXus by including scripts, you will be exposed to unexpected behavior and changes without previous notice.

How to create a User Control

To create a User Control I recommend using the GeneXus User Control Generator, for Atom. Using this Atom package you can easily create a GeneXus User Control.

Follow the steps to create a User Control and choose Web when prompted for the supported platforms by the package.

How to have code execute only once, when the page is loaded

After creating the User Control, open the src/<YourUserControlName>Render.js file and edit the show function this way:

this.show = function() {
  if (!this.IsPostBack) {
    // This code will be executed only, when the page is loaded.
  }
}

Inside the if you can code whatever you need to execute only once per page.

How to deploy a User Control

To build and deploy the User Control to your GeneXus installation directory, follow the build process steps described in the package documentation.

Once you have deployed your User Control, you should include it in the master page object, to start using it, instead of the script you are using now.