topic Re: div out of scope in Web AppBuilder Custom Widgets Questions

div out of scope

HelenZhou — Thu, 21 Apr 2016 13:10:47 GMT

I have the following code for a customized widget:

widget html: <div data-dojo-attach-point="moreParcelInfo"></div>

In the Widget.js, I have this code to Query some more information about this parcel

queryLocationInfo: function (parcelID) {

.........

qryTask_SearchID.execute(qry_SearchID, this.showLocationQueryResults, this.qry_SearchIDError);

}

showLocationQueryResults: function (results) {

.......

this.moreParcelInfo.innerHTML = resultItems;

}

In this function, this.moreParcelInfo is undefined. Does it mean this.moreParcelInfo is out of scope of the widget? How to fix it? Thanks

Helen

Re: div out of scope

RobertScheitlin__GISP — Thu, 21 Apr 2016 13:25:19 GMT

Helen,

You use lang.hitch.

qryTask_SearchID.execute(qry_SearchID, this.showLocationQueryResults, lang.hitch(this, this.qry_SearchIDError));

Re: div out of scope

HelenZhou — Thu, 21 Apr 2016 15:14:07 GMT

Thank you so much, Robert. It works. By the way, I really like your customized widgets. They are very useful.

Helen

Re: div out of scope

RobertScheitlin__GISP — Thu, 21 Apr 2016 15:22:00 GMT

Helen,

Don't forget to mark this question as answered by clicking the "Correct Answer" link on the thread that answered your question.

Re: div out of scope

HelenZhou — Mon, 02 May 2016 18:31:40 GMT

Robert, I don't know if I need to start a new thread or I can continue to this thread. It is another issue with out of scope.

The error message from Chrome debugging tool: this.showLocationQueryResults is not a function(…) and this.LocationInfo is undefined too

Can you help? Thanks

Helen

Here is the code:

In Widget.html: <div data-dojo-attach-point="LocationInfo" ></div>

in Widget.js:

queryLocationInfo: function (parcelID) {

xhr("http://tst-gis4.city.arl/wabdatasupport/SearchAuxiliary.aspx", {

handleAs: "text",

query: { parcelid: parcelID },

method: "POST"

}).then(function (data) {

lang.hitch(this, this.showLocationQueryResults(data));

------I am able to see the "data"-------------

------but the error from Chrome debugging tool: this.showLocationQueryResults is not a function(…)

--------and this.LocationInfo is undefined too

}, function (err) {

// Handle the error condition

var err;

}, function (evt) {

// Handle a progress event from the request if the

// browser supports XHR2

});

showLocationQueryResults: function (results) {

Re: div out of scope

RobertScheitlin__GISP — Mon, 02 May 2016 18:47:17 GMT

Helen,

Anytime you have a function then that functions code block is a different scope then the code block that it is called in so you need to use lang.hitch in front of the function keyword.

Re: div out of scope

HelenZhou — Mon, 02 May 2016 19:16:44 GMT

Thank you, Robert, for quick reply.

Yes, I use "lang.hitch(this, this.showLocationQueryResults(data));". But is still not working.

Re: div out of scope

RobertScheitlin__GISP — Mon, 02 May 2016 19:26:13 GMT

Helen,

But the line right above that has a function that is not hitched.

Re: div out of scope

HelenZhou — Mon, 02 May 2016 19:32:02 GMT

Robert,

I have worked it with the correct syntax:

lang.hitch(this, function(data){

lang.hitch(this, this.showLocationQueryResults(data));

}),Thanks you so much for help.