Skip to main content

When This is This and What is This, but What is not This, Dojo Event and Objects

In the past couple of years, I have been building Dojo Bootstrap widgets from stratch rather than using standard Dojo widgets and styling using a Bootstrap theme.  Why in the world would you do that might you ask.  Sometimes I also ask myself that question. There are many advantages, including adding security features that are not founded normally. Since we RESTFul JSON services, the widgets are optimized for our format.  In addition, the widgets are automatically binded with the RESTFul JSON services when the web page is instantiated. 

So as part of my Dojo adventures, I had to learn and relearn Dojo again and again. There is so many different ways to do things, but the right way is sometimes elusive.  One advantage of Dojo over JQuery is that Dojo forces you to use a pattern for creating widgets which I really like.  It is hard enough for me to follow what I did 2 months ago.  Imagine if another developer had to follow my code years later.

One problem is that like all software development, there are lot of stuff that are not written down in the documentation and they just assumed that you know it.  So here is a few important things that I learned that is extreme helpful.

If you use Bootstrap widgets, the HTML below is very familar to you.

<div class="widget" id="happy">
<ul>
<li id="1">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="2">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="3">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="4">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="5">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
</ul>
</div>
To connect this widget to an event you can use this simple few lines of code where "e" is the event handler.

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
  alert(e.target.tagName);
});


or for even shorter number of characters:

dojo.query('ul > li',this.domNode).onclick(function(e){
  alert(e.target.tagName);
});

So when you click on the widget, an alert box will appear with the tagname of the element. But what if you want to display the id of the widget. You could get it by using:

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
  alert(e.target.parentNode.parentNode.parentNode.id );
});

as long as you click on the A tag. However, if you click on the "I" tag then you would need to use

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(e.target.parentNode.parentNode.parentNode.parentNode.id );
});


An easier way is to pass the reference of the widget itself which is defined in Dojo as "this".  This can be accomplished by passing it as an argument:

dojo.query('ul > li',this.domNode).connect('onclick',this,function(e){
 alert(this.id);
});


So "this" is "this". Much easier isn't it. You can also redefine "this" as "what" and accomplish the same thing.

var what=this;
dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(what.id);
});

So what if you need to determine the id of the "LI" tag that you have clicked on, which is typical of a widget like a listbox, combobox, or menu? Again you can use the following if you clicked on the "A" tag:

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(e.target.parentNode.id );
});

or if you click on the "I" tag:

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(e.target.parentNode.parentNode.id );
});

This can get messly and this was what I was doing until I figured it out through experimentation. You can not find this in Dojo documentation. In this scenario, if you need to get the id of the LI tag, the reference of the "LI" tag is "this" since we are using dojo.query('ul > li') to define an event array.
 
dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(this.id);  // equal "3" when you click on the LI tag with id="3"
});

So no matter if you are clicking on the "A" tag or "I" tag you have the reference of the "LI" tag.
Now, if you also need to reference the widget itself you do not want to pass the reference of the widget as an argument as we did before.  That is because your will override the reference of LI with the reference of the widget.  So in order to reference the widget you need to define "this" as "what"

var what=this;
dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(this.id);  // "3"
 alert(what.id);  //"happy"

});


So now "what" is not "this". I hope "this" was helpful to you.  Coming soon I will let you know "what" you can do to tie events to dialog box event responses. 

Comments

Popular posts from this blog

The iPhora Journey - Part 8 - Flow-based Programming

After my last post in this series -- way back in September 2022, several things happened that prevented any further installments. First came CollabSphere 2022 and then CollabSphere 2023, and organizing international conferences can easily consume all of one's spare time. Throughout this same time period, our product development efforts continued at full speed and are just now coming to fruition, which means it is finally time to continue our blog series. So let's get started... As developers, most of us create applications through the conscious act of programming, either procedural, as many of us old-timers grew up with, or object-oriented, which we grudgingly had to admit was better. This is true whether we are using Java, LotusScript, C++ or Rust on Domino. (By the way, does anyone remember Pascal? When I was in school, I remember being told it was the language of the future, but for some reason it didn't seem to survive past the MTV era).  But in the last decade, there a

Creating Twitter Bootstrap Widgets - Part II - Let's Assemble

Creating Twitter Bootstrap Widgets - Part I - Anatomy of a Widget Creating Twitter Bootstrap Widgets - Part II - Let's Assemble Creating Twitter Bootstrap Widgets - Part IIIA - Using Dojo To Bring It Together This is two part of my five part series "Creating Twitter Bootstrap Widgets".   As I mentioned in part one of this series, Twitter Bootstrap widgets are built from a collection standard HTML elements, styled, and programmed to function as a single unit. The goal of this series is to teach you how to create a Bootstrap widget that utilizes the Bootstrap CSS and Dojo. The use of Dojo with Bootstrap is very limited with the exception of Kevin Armstrong who did an incredible job with his Dojo Bootstrap, http://dojobootstrap.com. Our example is a combo box that we are building to replace the standard Bootstrap combo box. In part one, we built a widget that looks like a combo box but did not have a drop down menu associated with it to allow the user to make a select

The iPhora Journey - Part 3 - Creating an Integrated UI Framework

The iPhora Journey - Part 1 - Reimagining Domino The iPhora Journey - Part 2 - Domino, the Little Engine that Could The iPhora Journey - Part 3 - Creating an Integrated UI Framework There are many ways to create the user interface (UI) for a web application. The HTML page could be created on the server and then pushed out. It could be static with the data generated on the page by the server with JavaScript, providing a more dynamic experience, or the server could generate new HTML content to update portions of the web page. XPages or PHP are good examples of this. Another method is to have the web page partially generated by the server and have JavaScript build the rest of the HTML by pulling data from the server via an API. This is the approach used in the Single Page Application (SPA) model. In all cases, it is still dependent on the web server technology being using.  As mentioned previously in this blog, XPages is dependent on complete integration between form and document, which e