Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Modifying component post-rendering

Avatar

Level 3

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

1 Accepted Solution

Avatar

Correct answer by
Level 10

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

View solution in original post

2 Replies

Avatar

Correct answer by
Level 10

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