Group Box - click event using Javascript

0
 Hi All,   I have a requirement to call a nanoflow only when group box is clicked.    I am using Event --> call a nanoflow -->  Javascript where I am passing a groupBoxName.   Javascript: (sample code - its not complete code) export async function test(groupBoxName,mxObj) { var GroupBox = document.getElementsByClassName('mx-name-' + groupBoxName)[0]; var GroupBoxHeader = GroupBox.getElementsByClassName('mx-groupbox-header')[0]; console.info('Inside test - GroupBoxHeader:',GroupBoxHeader); $(GroupBoxHeader).click(function() {   console.info('Group box clicked'); mx.data.action({ params: { applyto: "selection", actionname: "Address.MF_GetName", guids: [mxObj.getGuid()] } }); }); }   I have an observation that code is not always reaching to console.info('Group box clicked'); . whenever I click the groupBox. Its reaching to console.info('Group box clicked'); randomly due to synchronous call.   I think I should convert this $(GroupBoxHeader).click(function()  into Promise. So that it will call asynchronous.   Can someone guide me how I can rewrite  $(GroupBoxHeader).click(function() {  into Promise and achieve this? or if you have any different suggestion/opinion . Do let me know.   NOTe: Similar code was working perfectly fine when I was using HTMLSnippet. And replacing HTMLSnippet with Javascript    
asked
1 answers
1

The main issue is not about synchronous or asynchronous execution. A click event already works asynchronously. The real problem is that you are attaching the click handler to a specific DOM element that exists at that moment. In the React client, the page (and the GroupBox) can be re-rendered, and when that happens the original DOM element is replaced. Your click handler stays on the old element, so sometimes the click is not detected and it feels random.

 

Another weak point is that this JavaScript action may run more than once. Each time it runs, a new click handler is added. That can also cause inconsistent behavior. In HTMLSnippet, this often “works by luck” because the DOM is more stable there.

 

Turning the click into a Promise will not fix this, because the problem is not timing, it is where the event is attached.

 

A more reliable way is to listen for clicks on a higher level that always exists (for example the document) and then check if the click came from the GroupBox header. That way, even if the GroupBox is re-rendered, the click is still caught.

 

export async function test(groupBoxName, mxObj) {
  const selector = `.mx-name-${groupBoxName} .mx-groupbox-header`;

  document.addEventListener("click", function (e) {
    const header = e.target.closest(selector);
    if (!header) return;

    console.info("Group box clicked");

    mx.data.action({
      params: {
        applyto: "selection",
        actionname: "Address.MF_GetName",
        guids: [mxObj.getGuid()]
      }
    });
  });
}

This approach is more stable in the Mendix React client and removes the random behavior without needing Promises or jQuery.

answered