Javascript Component Method Not Invoking Callback After Require Block

Greetings,

I’m having an issue with a javascript component, which is integrated with Java. I’m unable to successfully invoke a prototyp function after a require block is declared. Functions called from other prototype functions, which do not use require blocks, are invoked fine. However, if there is a require block at the start of the function the subsequent prototype function is not invoked. Please see the code below.


Java:

@JavaScript({"maputil.js", "maputilconnector.js"})
public class MapUtilComponent extends AbstractJavaScriptComponent {
    
    public MapUtilComponent() {
        registerFunctions();
    }
    
    /**
     * Registers functions that can be called from the client side
     * 
     */
    private void registerFunctions() {
        //CALLBACK REGISTERED ON SERVER SIDE
        this.addFunction("[color=#FF0000]
[b]
sendBlockCount
[/b]
[/color]", new JavaScriptFunction() {
            private static final long serialVersionUID = -6857196720604898164L;

            @Override
            public void call(JsonArray arguments) {
                System.out.println("callback called...");
                Notification.show(arguments.asString());
            }
        });
    }
    
    public void alertme(){
        this.callFunction("alertme");
    }
    
    public void mapset(){
        this.callFunction("mapset");
    }


javascript connector:

window.path_to_component_MapUtilComponent = function() {
    // Create the component
    var maputil = new MapUtilComponent(this.getElement());
    
    var self = this;    
    
    // server side calls
    this.onStateChange = function() {
        //do nothing
        //maputil.setValue(this.getState().value);
    };
    
    this.onValueChange = function() {
        //maputil.sendreportdata(maputil.getValue());
    };
    
    // map load
    this.loadMap = function() {
        maputil.loadMap();
    };
    
    this.alertme = function(){
        maputil.alertme();
    };
    
    this.mapset= function() {
        maputil.mapset();
    };
    
    this.selectfeature = function(featureLayerId, objectId) {
        maputil.selectFeature(featureLayerId, objectId);
    };
    
    this.getblockcount = function(featureLayerId) {
        maputil.getblockcount(featureLayerId);
    };

[b]
[color=#FF0000]
//*****CALLBACK DECLARATION*******//
[/color]
[/b]
    maputil.sendreportdata =  function(ct) {
            alert('sendreportdata');
           [color=#FF0000]
[b]
 self.sendBlockCount(ct); //<------CALLS FUNCTION REGISTERED ON SERVER SIDE
[/b]
[/color]
    };
   
};


javascript:

// Dictionary that will contain values related to the map and web services that need to be accessed by multiple JavaScript functions
var globalMapVars = {};

var maputil = map;

function MapUtilComponent(e) {
    this.test_string='';
};
           
MapUtilComponent.prototype.mapset = function() {
           
require([ "esri/map" ]
, function(Map) {
           maputil = new Map("mapDiv");
           maputil.showAttribution(true);
           maputil.setInfoWindowOnClick(true);
           
       });
       
};

MapUtilComponent.prototype.selectFeature = function(featureLayerId, objectId) {
            require([                                                 
                     "esri/layers/FeatureLayer",               
                     "esri/tasks/query"                         
               
                 ], function( FeatureLayer, Query ) {

                    var query = new Query();
                    var featureLayer = map.getLayer(featureLayerId);

                    // Set Query to target Object Id
                    query.where = "OBJECTID = " + objectId;
                    featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
                    
            });
                
};

MapUtilComponent.prototype.sendreportdata= function() {
    //
    //this.sendreportdata(this.test_string);
    window.alert("SRD CALLED");
};


MapUtilComponent.prototype.alertme2= function(ct) {
    window.alert("ALERTED2x!"+" ct=="+ct);
};

MapUtilComponent.prototype.alertme= function(ct) {
    window.alert("ALERTEDx!"+" ct=="+ct);
    this.sendreportdata(ct);
    //this.alertme2(ct);
};


MapUtilComponent.prototype.getblockcount = function(featureLayerId) {
    
    require([                                                               
                 "esri/tasks/query"
           
    ], function( Query) {
            
        var featureLayer = map.getLayer(featureLayerId);
        selectedPolygon = featureLayer.getSelectedFeatures()[0]
;
        
        var query = new Query();
        query.geometry = selectedPolygon.geometry;
        
        var blockAreasBL = map.getLayer("blocks");
        blockAreasBL.queryCount(query, callback, errback);
        
        alert('test_string==>'+this.test_string);
        
        function callback(count) {
            this.test_string=count;
            alert("Block count: " + count+"test_string==>"+this.test_string);
            var maputilcomp = new MapUtilComponent();
            [b]
[color=#FF0000]
maputilcomp.sendreportdata(this.test_string);//<---------FUNCTION DOES NOT INVOKE CALLBACK
[/color]
[/b]
            //I've also tried the call with [b]
[color=#FF0000]
this.sendreportdata(this.test_string)
[/color]
[/b]
        }
        
        function errback(error) {
            console.log(error);
        }
        
        function callSendReport(count){
            this.test_string=count;
            alert("Block count xxxx: " + count+"test_string==>"+this.test_string);
        }
        
    });
    
   

};



    

Hi, can you provide an
SSCCE
so I could have a look?

Alejandro,
Please pardon the late response. I’ve been slammed at work! The SSCCE is attached.
Here’s what should happen:
After clicking the “Add Layer” button, you’ll see the state of Mississippi highlighted. Upon clicking “RM Layer x Callback” the highlighting layer should be removed and the callback this.callserverside should be invoked in the map.js file.

TU
33409.zip (34.5 KB)

Hi, thanks for the code. That always helps a lot!

I think the problem is that you are using a wrong reference to invoke the
callserverside
function. You have to keep a reference to the JavaScript component, for example:

[font=courier new]
MapComponent.prototype.removeLayers = function() {

var self = this;

require([ “esri/map” ]
, function(Map) {
window.map.removeAllLayers();
window.map.graphics.clear();
window.map.setBasemap(“oceans”)


self.callserverside();

})
};
[/font]

Alejandro, this works! THANKS!