Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Can we include components using javascript?

Avatar

Level 5

Hi All,

    We can include existing components in new component by adding,

        <cq:include path="" resourceType="" />

Is it possible to achieve the same using javascript?

Like,

<script type="text/javascript">

    var temp    =    "<cq:include path="sometext" resourceType="existing/component/path" />"

  if(some condition){

        $("#somediv").append(temp);

}

</script>

 

The above code is jus an illustration. I am into a situation where i have to use javascript to include a existing component.

Suggestions please.

Thanks,

Jai

1 Accepted Solution

Avatar

Correct answer by
Level 5

hi,

As we know javascript Run on client Side and the component include will be run on server and it send html response to the browser .

<script type="text/javascript"> var temp    =    "<cq:include path="sometext" resourceType="existing/component/path" />" if(some condition){ $("#somediv").append(temp); } </script>

As per your above script the output embedded with that id is String only not component it will simply print 

<cq:include path="sometext" resourceType="existing/component/path" />

So it can not be included at client side script.

But we can achieve by seprate execution of that component into server and send the response as html and then we can get it by jquery to request that component and get Json as a response or xml as a response and include into that id so it will give write result because the response is handle by client side.

View solution in original post

4 Replies

Avatar

Correct answer by
Level 5

hi,

As we know javascript Run on client Side and the component include will be run on server and it send html response to the browser .

<script type="text/javascript"> var temp    =    "<cq:include path="sometext" resourceType="existing/component/path" />" if(some condition){ $("#somediv").append(temp); } </script>

As per your above script the output embedded with that id is String only not component it will simply print 

<cq:include path="sometext" resourceType="existing/component/path" />

So it can not be included at client side script.

But we can achieve by seprate execution of that component into server and send the response as html and then we can get it by jquery to request that component and get Json as a response or xml as a response and include into that id so it will give write result because the response is handle by client side.

Avatar

Level 5

Hi,

  My above code actually prints the entire existing component code if i try to view source.

    My use case is i am making an Ajax Call getting a JSON Array of objects as response[which consists of child pages of a particular page]. I am iterating through the JSON Array to display the pages.At the end of each page i have to include one more custom component. 

Is there any way to achieve this?

Avatar

Level 5

ya it will print  whole code because browser doesnt execute java or jsp so it will print whole.

Ya according to my knowledge you can do this ...

At the end of the page is displayed you can hit the url as ajax call and the get the data of the component in the json formet and embed it where you want.

you can try this may achieve your goal.

Avatar

Level 5

Ok I will try that. Many thanks zeeshan khan