I would appreciate if anyone can help me in moving forward.
I have customized a simple CustomWidgetTemplate widget. In the widget.js I am extending the BaseWidget class by adding a function
_getData: function() {
This function reads the contents in a input box, and sends a ajax request to a php file to search data in a SQL Server table based on string got from input box.
The data is retrieved as JSON
After parsing JSON, I am getting matching name and coordinates of the features based on the search string passed from input box.
var name
var coordinates
I am showing all the returned results as <ul> list li.innerHTML. I am creating the list as follows:
I have created a resultDiv in Widget.html
<div id="resultsDiv"></div>
dojo.place(ul,"resultsDiv");
var li = dojo.doc.createElement("li");
li.innerHTML = "<span data-dojo-attach-point='anattachpoint' data-dojo-attach-event='click: _onClick'>"+name+"</span>";
Upto this place everything is working fine. I can see the list, but when I click on the names, it does not seem to go to the _onClick function. I even created a simple alert("test") or console.log("Test") inside the _onClick function.
I am not succeeding in this.
Any help will be appreciated.
Thanks
Qazi Iqbal
Solved! Go to Solution.
Qazi,
Glad to help. Now it is your turn to help the community by marking this question as answered. All you have to do is click the "Correct Answer" link (the one with the little green star) on the post that provided the answer for you. If the answer was not provided by one of the responders then you can mark any of the replies that you received as helpful by clicking on the "Actions" menu and choosing "Mark as Helpful"
Qazi,
"data-dojo-attach-event" is for html elements that already exist in the template html code not things added dynamically. If you need to attach an event listener to a dynamically created element then you use dojo on.
I.e.
on(li, "click", function(){//do something});
Robert
Thanks. It helped a lot. I have a question related to this.
I have variable name and coordinates for multiple records returned from database. I create li element for each of them by name.
var li = dojo.doc.createElement("li");
li.id = name;
li.tag = minx+","+miny+","+maxx+","+maxy;
on(li, "click", function(e){
console.log(this.id);
console.log(this.tag);
});
li.innerHTML = "<span style='color: blue; font-size: 7pt; cursor: pointer;'>"+name+"</span>";
The above part works best.
But if I write a seperate function, for example
_myFunction: function(name){
console.log(name);
}
then use onclick event handler as below
on(li, "click", _myFunction(name));
This does not work. It shows error _myFunction not defined.
How can I handle this.
Thanks for your help.
Qazi
Qazi,
If you are adding the li elements in your _getData: function() { and then have the _myFunction outside of the _getData then you would need to have something like this:
this.own(on(li, 'click', lang.hitch(this, this._myFunction)));
What this.own means is that the event handler is destroyed when the code that called "this.own" is destroyed. Next the fact that the above uses lang.hitch you maintain the scope of the code to know what "this" is in the code block. So all together it would look something like this:
_getData: function() { .... var li = dojo.doc.createElement("li"); li.id = name; li.tag = minx+","+miny+","+maxx+","+maxy; this.own(on(li, 'click', lang.hitch(this, this._myFunction))); .... }, _myFunction: function(evt) { console.info(evt.target); }
Robert
Thanks for your patience and assistance.
The way you described works perfect. Inside the _getData function, I am using
_getData: function (){
dojo.xhrGet({
url: "../services/GlobalSearch.php",
handleAs: "json",
content:{token: srcString},
load: function(data) {
//Here I am parsing the data and get different values
for (var i=0;i<data.length;i++) {
//Here I am creating a list li
var li = dojo.doc.createElement("li");
li.id = name;
li.tag = minx+","+miny+","+maxx+","+maxy;
this.own(on(li, 'click', lang.hitch(this, this._myFunction)));
Inside the dojo.xhrGet, it is not working.
If I use this.own(on(li, 'click', lang.hitch(this, this._myFunction))); before starting dojo.xhrGet, it is working.
Appreciate your help.
Qazi,
Try adding lang.hitch to the load function:
dojo.xhrGet({ url: "../services/GlobalSearch.php", handleAs: "json", content:{token: srcString}, load: lang.hitch(this, function(data) {
Robert
Thanks. It works perfect. It would have never come in my mind.
Last piece of help.
Both the functions below work.
this.own(on(li, 'click', lang.hitch(this, this._onClick)));
on(li, 'click', this._onClick);
When I pass the value, onClick does not work after I click the li element.
I am trying like
I have variable tag
on(li, 'click', this._onClick(tag);
_onClick: function(tag){
console.log(tag);
},
It shows the value without clicking on li element. Somehow onclick event does not fire. But if I dont pass any value, then onclick event fires perfect. Am I doing something wrong.
Robert
Thanks for all your help. I figured it out.
I did not pass any variable, rather, I set the ID and tag property to the li element and then
_onClick: function(evt){
console.info(evt.target.id);
console.info(evt.target.tag);
},
This worked fine. Appreciate your help.
Qazi
Qazi,
Glad to help. Now it is your turn to help the community by marking this question as answered. All you have to do is click the "Correct Answer" link (the one with the little green star) on the post that provided the answer for you. If the answer was not provided by one of the responders then you can mark any of the replies that you received as helpful by clicking on the "Actions" menu and choosing "Mark as Helpful"
Thanks. Marked as Correct Answer.
Qazi