Custom widget json returned via ajax

[QaziIqbal]

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

[RobertScheitlin__GISP]

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});

[QaziIqbal]

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

[RobertScheitlin__GISP]

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);
}

[QaziIqbal]

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.iqbal@gmail.com

[RobertScheitlin__GISP]

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) {

[QaziIqbal]

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.

[QaziIqbal]

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

[RobertScheitlin__GISP · Accepted 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"

[QaziIqbal]

Thanks. Marked as Correct Answer.

Qazi