CODEWITHSUNDEEP
javascriptdojotooltip
Charline
Charline

Reputation: 283

dojo on method after a domConstruct.create

My problem is to display a tooltip on an element that was just created (from data extracted from a database). I need to update its content (which I didn't managed to do successfully yet) and to set an event on mouseover and mouseleave.

Here is the code:

// in for loop
domConstruct.create('p', {'data-dojo-attach-point':'tooltipExample' + tooltipIndex,'innerHTML': myValue}, this.myNode);

// on each tooltipExample element:
on(this.tooltipExample1, "mouseover", lang.hitch(this, function (evt) {
    // open popup
}));
on(this.tooltipExample1, "mouseleave", lang.hitch(this, function (evt) {
    // close popup
}));

Apparently, the on method doesn't work:

Unable to get value of the property on: object is null or undefined

I also had several times problems with creating twice the same id because of the interface refreshing itself.

Do you have any idea of how I could make this work?

Upvotes: 0

Views: 1328

Answers (3)

Stefano
Stefano

Reputation: 302

You can put this in a loop and name it as you want. In this case spa (this.spa) is the attach-point.

this.spa = domConstruct.create("p", {
                   innerHTML: "Lorem ipsum",
                   style: "color: blue;",
                   onclick: function(){
                      console.log(this.innerHTML); // print -> Lorem ipsum
                      this.innerHTML = "change content";
                   },
                   onmouseenter: function(){
                      this.style = "color: green;"
                   },
                   onmouseout: function(){
                      this.style = "color: blue;"
                   }
                });
                domConstruct.place(this.spa, this.domNode);

Upvotes: 0

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

In this case it's usless to use data-dojo-attach-point in your case , because this last work after dojo parser is executed and attach each elment to its template ; so just add an id and atach event directly to generated Item :

Above a working example 

require(["dojo/dom-construct","dojo/dom","dojo/on","dojo/parser","dojo/ready"],function(domConstruct,dom,On,parser,ready){
		ready(function(){
    	for(i=0;i<5;i++) {
      	var elment = domConstruct.create('p', {'id':'tooltipExample'+i,'innerHTML': "parag "+i}, "container");
        console.log(elment);
        On(elment, "mouseover", function (evt) {
            console.log("mouse over ",evt.target.id);
            dom.byId("event").innerHTML = "mouse over "+this.id;
        });
        On(elment, "mouseleave", function (evt) {
            console.log("mouse leave ",evt.target.id);
            dom.byId("event").innerHTML = "mouse leave "+this.id;
        });
      }
    });
});
<script type="text/javascript">
  dojoConfig = {isDebug: true, async: true, parseOnLoad: true}
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div id="container"></div>
<br>
<strong><div id="event" style="color:red"></div></strong>

Fiddle Here

Upvotes: 3

barbsan
barbsan

Reputation: 3458

Try adding id property to your p elements.

domConstruct.create('p', { id:'tooltipExample' + tooltipIndex,'innerHTML': myValue}, this.myNode)

Example: jsfiddle

Upvotes: 0

Related Questions