Modifying component post-rendering | Community
Skip to main content
blkhatpersian
blkhatpersian
New Participant
March 22, 2016
Solved

Modifying component post-rendering

  • March 22, 2016
  • 2 replies
  • 1108 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by edubey

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

2 replies

blkhatpersian
blkhatpersianAuthor
New Participant
March 22, 2016

That was it, thank you edubey!

edubey
edubeyAccepted solution
New Participant
March 22, 2016

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

Terms & ConditionsAccessibility statement

Loading footer...