Modifying component post-rendering

[blkhatpersian]

Hi all,

I am wanting to dynamically "hide" a parsys on one of my AEM pages when it is in edit mode. I am wanting to do this with in-code script, taking advantage of the "cq:widgets" clientLibrary. I have a javascript file where I am using the CQ.WCM.getEditable method to find a component by giving it a path and then calling the .hide() method. 

Here is my simple code: 

function hideparsys(path){ var parsysComp = CQ.WCM.getEditable(path); if(parsysComp){ alert(path); } parsysComp.hide(); // makes the parsys Invisible }

I call that code at the bottom of my page-rendering .jsp file where this parsys is included. Here is that code: 

<script type="text/javascript"> { hideparsys("<%= currentNode.getPath()+ /pars"); } </script>

The error I get in the console is that parsysComp is null when I attempt to call .hide(). My hideparsys code is being executed before the parsys in my .jsp is rendered or made availabe by AEM and that is why I cannot access it.

Does anyone have any suggestions in-script on when/how to modify a component after it has been rendered? 

Thanks,
Ali

[edubey · Accepted solution]

Try using this at the end of template level. It will execute once page is loaded...

(function() { CQ.WCM.on("editablesready", function() { CQ.WCM.getEditable(your_node_path + "/parsys/*").hide(); }); })();

Do replace this your_node_path with your own

[blkhatpersian]

That was it, thank you edubey!