Skip to main content

Don't Get Disconnected with Connect

Here is another of my "My Experience in Building Dojo Widgets" post.

Dojo.connect (dojo/on) is a versatile and important part of dojo that handle events.  Along with dojo.subscribe and dojo.publish these three features of Dojo provide a powerful set of tools to query the DOM.


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


Referencing my widget that I used in my last blog, I can connect this list widget using the following lines of code and create event responses accordingly.


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


If this list widget does not change throughout the existence of this page, this code is perfectly fine.

Let say that during the use of this web page the list needs to be updated.  If you clear the list using for example dojo.destroy or dojo.empty and repopulate the page, you can reapply dojo.connect and it will work.  However, the connections to the previous DOM nodes that you have destroyed still exist in Dojo.  Normally, this is fine though you use up more and more memory. 

However, in a more complex widget where the behavior of list DOM Nodes is different, this will come and bite you.  For example, below is a grid that has a toolbar with buttons and dropdown buttons that is dynamic.



In this widget, the toolbar will change depending on what tab you select in a tab widget that is on the same page.  If you open the button menu and click outside of the menu we want the menu to close.  However when you destroy the first toolbar and create the second, the dojo event handler still thinks that the first toolbar is there.  So the connection for closing the menu is still there and if you click anywhere on the body of the page, you will create a nasty JavaScript error.  

In order t remedy the situation, dojo provide dojo.disconnect.  Dojo.disconnect removes any event connection created by dojo.connect.  In order to disconnect an event you need to get a handle to the connection.  So from our previous example, we can assign a handle to the connections.

var handle=dojo.query('ul > li',this.domNode).connect('onclick',function(e){
  alert(e.target.tagName);
});
Since we are creating a list of connections "handle" is an array of connections. So when you what to refresh the list, we need to first get an array of handles so that we can disconnect them before rebuilding the widget DOM. So we first need to declare an array to store the list of handles.  I normally declare this in the widget constructor:

constructor:function(){
    this.connections=[];
});

So before you refresh the list widget and add new DOM nodes disconnect any existing connections that the widget has then destroy the DOM nodes, rebuild the DOM nodes, and store the new connection handles into the disconnect array, this.connections.  Therefore, the code for creating event connections becomes.

dojo.forEach(this.connections,function(connection){
      dojo.disconnect(connection);
});
var listNode=dojo.query('ul',this.domNode)[0];
dojo.empty(listNode);
var handle=dojo.query('ul > li',this.domNode).connect('onclick',function(e){
      alert(e.target.tagName);
});
this.connections.push.apply(this.connections,handle);

Hope this was useful.






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