CODEWITHSUNDEEP
aem
Jai
Jai

Reputation: 399

Can we include cq components(with dialog) using javascript?

We can include existing components in new component by adding,

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

Is it possible to achieve the same using javascript?

Like,

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

  if(some condition){

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

}

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

Suggestions please.

Thanks,

Jai

Upvotes: 0

Views: 1921

Answers (2)

Oleksandr Tarasenko
Oleksandr Tarasenko

Reputation: 1454

Do not know easy way to dynamically show it. Probably it would be easier to include component, but hide it in some cases?

Next approach has several drawbacks (like no clientlibs downloaded, so you should include them not in component, but on page where you include this component).

  1. Create component if needed.

CQ.HTTP.post(pathToWhereItShouldBe + "/nodeName", null, {
  "jcr:primaryType" : "nt:unstructured",
  "sling:resourceType" : "some/type"
});

  1. Get content of this component.

Like this:

var comp = CQ.shared.HTTP.get(pathToWhereItShouldBe + "/nodeName")

  1. Put html code somewhere on your page
  2. Add listener (on double click for example) to this component which will open dialog using function.

function doOpenDlg(url, path) {
	var d = CQ.WCM.getDialog(url);
	var reloadPage = true;
	if(d) {
		if( reloadPage ) {
			d.success = function(form, action) {
				CQ.Util.reload(CQ.WCM.getContentWindow());
			};
		}
		d.show();
		d.loadContent(path);
	}
}

Upvotes: 1

Justin Edelson
Justin Edelson

Reputation: 471

I'm assuming you're referring to client-side JavaScript. If this is server-side JavaScript, then you can do this with a combination of Sightly and JavaScript Use Objects.

It generally isn't practical to do this in the authoring environment as it involves mucking with the Editables and generally makes the authoring experience more complicated. It is certainly possible (and quite simple) to do this in the publish environment.

In publish, you would do something like this (with jQuery):

if (some condition){
    $("#somediv").load("<%= resourceResolver.map(request, currentResource.getPath() + "/sometext.html")) %>);
}

which gets emmitted as

if (some condition){
    $("#somediv").load("/content/path/to/page/_jcr_content/sometext.html")) %>);
}

This will make an AJAX request for /content/path/to/page/_jcr_content/sometext.html and use the content to replace the div with the provided ID.

Upvotes: 1

Related Questions