Calling an external Js in a selection listener

[sagar_birkar1]

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

[smacdonald2008 · Accepted solution]

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.