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

Calling an external Js in a selection listener

Avatar

Level 1

Hi,

My current requirement is to invoke an external JS from a selection listener.In the listener's loadcontent() method, the external JS should be invoked and

a method call needs to be made. For example,

loadcontent : function(field, rec, path){
//
loadScript("/apps/cbc/widgets/source/widgets/File2.js", function(){
    alert("pi");

//Method call to the external script
});
}

However, loadScript is not working.and would like to know how to make a method calls.

 

Regards,

Sagar

1 Accepted Solution

Avatar

Correct answer by
Level 10

You can certainly use a third party JS ( ie - a JQUERY plug-in) in a xtype listening event. For example -- consider this listener in a CQ.form.Selection:

// overriding CQ.Ext.Component#initComponent
    initComponent: function() {
        Ejst.CustomWidget.superclass.initComponent.call(this);
 
        this.hiddenField = new CQ.Ext.form.Hidden({
            name: this.name
        });
        this.add(this.hiddenField);
 
        this.allowField = new CQ.form.Selection({
            type:"select",
            cls:"ejst-customwidget-1",
            listeners: {
                selectionchanged: {
                    scope:this,

                    //YOu can call Method  x here and then in Method x - use the functionality of the JQuery JS file. 
                    fn: this.updateHidden
                }
            },
            optionsProvider: this.optionsProvider
        });
        this.add(this.allowField);

****************************************************************************

So in this example - you can call Method x within a listening when a user changes a selection in a CQ.form.Selection. Then in Method X - use your JS like normal. 

Make sure that you setup your listeners properly and that you include the 3rd party JS in an AEM client library. 

With xtypes - you can do a lot. You can even call a back end AEM Sling Servlet. See:

http://helpx.adobe.com/experience-manager/using/creating-custom-cq-tree.html

I would read that article - it talks about setting up different JS files (where you can use 3rd party JS files) in your component.  In addition - it also shows you how to invoke a back end servlet -(but the important thing here for you is the relationship between JS files and the component - see the relationship between defaulttree.js and the main component - aemtree.jsp).  In your use case - you can invoke 3rd party JS in the defaulttree.js instead of calling a backend servlet.  

View solution in original post

1 Reply

Avatar

Correct answer by
Level 10

You can certainly use a third party JS ( ie - a JQUERY plug-in) in a xtype listening event. For example -- consider this listener in a CQ.form.Selection:

// overriding CQ.Ext.Component#initComponent
    initComponent: function() {
        Ejst.CustomWidget.superclass.initComponent.call(this);
 
        this.hiddenField = new CQ.Ext.form.Hidden({
            name: this.name
        });
        this.add(this.hiddenField);
 
        this.allowField = new CQ.form.Selection({
            type:"select",
            cls:"ejst-customwidget-1",
            listeners: {
                selectionchanged: {
                    scope:this,

                    //YOu can call Method  x here and then in Method x - use the functionality of the JQuery JS file. 
                    fn: this.updateHidden
                }
            },
            optionsProvider: this.optionsProvider
        });
        this.add(this.allowField);

****************************************************************************

So in this example - you can call Method x within a listening when a user changes a selection in a CQ.form.Selection. Then in Method X - use your JS like normal. 

Make sure that you setup your listeners properly and that you include the 3rd party JS in an AEM client library. 

With xtypes - you can do a lot. You can even call a back end AEM Sling Servlet. See:

http://helpx.adobe.com/experience-manager/using/creating-custom-cq-tree.html

I would read that article - it talks about setting up different JS files (where you can use 3rd party JS files) in your component.  In addition - it also shows you how to invoke a back end servlet -(but the important thing here for you is the relationship between JS files and the component - see the relationship between defaulttree.js and the main component - aemtree.jsp).  In your use case - you can invoke 3rd party JS in the defaulttree.js instead of calling a backend servlet.