JS hook panel/open_editor/{elementType} not working for anything beside 'widget'

[BSAleLuna]

Hi everybody,

I will ask here for help because I have a problem with elementor.
I added a control to the PRO widget posts as you can see in attachment. This is used in my plugin to just restrict the query to the posts in relatioship to post i'm viewing (used in template). Everything works just fine so, yeah.
The only thing that bother me is: Since query ID is used under the hood if you enable my plugin and doesnt matter if you type "asdasd" in query ID , it will always use my custom id query, I want to (display,none) the group of query id if my switch is ON.
Seems super trivial and easy, but i found a bug in elementor (i think) plus i dont know how to approach in another way.
Following the docs /js-hooks/ I was expecting to have this hook:

panel/open_editor/{elementType}​

or better

panel/open_editor/{elementType}/{elementName}​

But while
elementor.hooks.addAction('panel/open_editor/widget/posts', function (panel, model, view) {}....

Works just fine, this action is never fired for "section" nor "sections" not anything else beside elementType='widget'.
If you want proof of that just go to editor.js of elementor and go to line 24207 and add

var action = 'panel/open_editor/' + args.model.get('elType'); // Example: panel/open_editor/widget
console.log(action);
console.log(args.model.get('elType'));
elementor.hooks.doAction(action, this.component.manager, args.model, args.view); // Example: panel/open_editor/widget/heading
elType is alwasy "widget", no other action are actually fired for anything else.

The problem is when elementor fires panel/open_editor/widget/posts once you click on edit, you dont have in the the DOM all sections loaded, so you cant bind .click in my control. or even pretend you want just .css({display,none}) in the query id part always. Nope there is no dom until you open the section.

So beside the bug (i wrote to premium support to inform),How Am I suppose to interact to existing control via JS without dirty workaround ?


Thanks

 

[DarkoIfet]

This issue is so old, yet I encountered it and still didn't find any solutions. Did you find the solution?

 

[Community]

To dynamically hide the Query ID group in Elementor's Posts widget based on your custom switch control, you can use a combination of Elementor's JS hooks and a MutationObserver to ensure the DOM is ready. Here's a step-by-step solution:

Step 1: Use Elementor's Hook to Access the Widget Panel​

Leverage the panel/open_editor/widget/posts hook to trigger your logic when the Posts widget panel opens.

Step 2: Set Up a MutationObserver​

Observe DOM changes within the panel to detect when the Query ID group is rendered.

Step 3: Toggle Visibility Based on Your Switch​

Check the state of your custom switch and hide the Query ID group accordingly. Bind an event listener to the switch for real-time updates.

elementor.hooks.addAction('panel/open_editor/widget/posts', function (panel, model, view){const panelContainer = panel.$el[0].querySelector('.elementor-controls');
    if (!panelContainer) return;
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            mutation.addedNodes.forEach((node) => {
                const queryIdSection = node.querySelector?.('.elementor-control-query_id');
                if (queryIdSection){toggleQueryIdVisibility(model, queryIdSection);
                    const customSwitch = node.querySelector('[data-setting="your_custom_switch_id"]');
                    if (customSwitch){customSwitch.addEventListener('change', () => {
                            toggleQueryIdVisibility(model, queryIdSection);
                        });
                    }
                }
            });
        });
    });
    observer.observe(panelContainer,{childList: true,
        subtree: true
    });
    panel.once('destroy', () => observer.disconnect());
});
function toggleQueryIdVisibility(model, queryIdSection){const isActive = model.get('settings').get('your_custom_switch_id');
    queryIdSection.style.display = isActive ? 'none' : '';
}

Explanation:​

1. Elementor Hook: The panel/open_editor/widget/posts hook ensures your code runs when the Posts widget panel is opened.
2. MutationObserver: Watches for DOM updates within the panel, allowing you to act once the Query ID group is rendered.
3. Visibility Toggle: Checks your custom switch's state and hides the Query ID section using inline CSS.
4. Event Listener: Updates the visibility dynamically when the switch is toggled.

Notes:​

• Replace your_custom_switch_id with the actual ID of your custom switch control.
• Ensure your switch control is properly registered in the widget's controls array.
• This approach avoids Elementor's potential bug by working directly with the DOM once controls are loaded.

This method provides a robust solution to conditionally hide controls based on another control's state, even when elements load asynchronously.