Unable to set an onclick function within a customized dojo widget

Question

Unable to set an onclick function within a customized dojo widget

I have a custom widget that I've defined as shown below:

dojo.declare('myWidget', [dijit._WidgetBase, dijit._Templated],
{
    'templateString':'<span>' +
            '<a  dojoAttachPoint="linkNode" href="blah.php">' +
                '<img class="thumbNail" src="blahthumb.php" />' +
            '</a>' +
            '<h4 dojoAttachPoint="title" class="title">${blahtitle}</h4>' +
        '</span>',
    'stuff':null,
    'startup':function()
    {
        dojo.connect(this.linkNode, 'onclick', function(e){dojo.stopEvent(e);alert('hi');});
    }
});

When I programmatically create the widget and add it to the page like this:

...
    f = new myWidget(stuff);
    f.startup();    
    li = dojo.create('li', {'class':'thingy'});
    dojo.place(f.domNode, li);
    dojo.place(li, this.gallery); // inside another widget
...

The onclick event connected in the startup method doesn't seem to be firing. I've tried different ways of assigning it but nothing seems to work.

Is there something wrong with the way I'm setting up the onclick event?

javascript events dojo onclick

Answer 1

Answer №1

It's uncertain why your current approach isn't functioning as expected. One possible reason could be the lack of propagating the method call to startup by incorporating this.inherited(arguments); at the end of the method.

Considering your scenario, an alternative method might be more appropriate. Apart from utilizing dojoAttachPoint, there is also dojoAttachEvent in Dojo. It may be beneficial to implement it like this:

dojo.declare('myWidget', [dijit._WidgetBase, dijit._Templated],
{
    'templateString':
        '<span>' +
            '<a dojoAttachEvent="onClick:_linkNodeClick" href="blah.php">' +
                '<img class="thumbNail" src="blahthumb.php" />' +
            '</a>' +
            '<h4 dojoAttachPoint="title" class="title">${blahtitle}</h4>' +
        '</span>',

    'stuff':null,

    '_linkNodeClick':function(e){
        dojo.stopEvent(e);
        alert('hi');
    }
});

Edit

Upon testing it myself, I was able to make it work with the following adjustments:

dojo.provide("MyWidget");
dojo.declare('MyWidget', [dijit._Widget, dijit._Templated],
{
    'templateString':
        '<span>' +
            '<a dojoAttachPoint="linkNode">' +
                '<img class="thumbNail" src="blahthumb.php" />' +
            '</a>' +
            '<h4 dojoAttachPoint="title" class="title">${blahtitle}</h4>' +
        '</span>',

    'startup':function()
    {
        dojo.connect(this.linkNode, 'onclick', function(e){dojo.stopEvent(e);alert('hi');});
    }
});

To initiate it, I needed to attach it to the DOM before invoking the startup function.

var f = new MyWidget();
dojo.body().appendChild(f.domNode);
f.startup();

The only modifications made were adding dojo.provide(...) and using _Widget instead of _WidgetBase. Additionally, reordering the steps as suggested. Now, clicking on the image triggers the alert "hi" without navigating to the link.

Answer 2

It's uncertain why your current approach isn't functioning as expected. One possible reason could be the lack of propagating the method call to startup by incorporating this.inherited(arguments); at the end of the method.

Considering your scenario, an alternative method might be more appropriate. Apart from utilizing dojoAttachPoint, there is also dojoAttachEvent in Dojo. It may be beneficial to implement it like this:

dojo.declare('myWidget', [dijit._WidgetBase, dijit._Templated],
{
    'templateString':
        '<span>' +
            '<a dojoAttachEvent="onClick:_linkNodeClick" href="blah.php">' +
                '<img class="thumbNail" src="blahthumb.php" />' +
            '</a>' +
            '<h4 dojoAttachPoint="title" class="title">${blahtitle}</h4>' +
        '</span>',

    'stuff':null,

    '_linkNodeClick':function(e){
        dojo.stopEvent(e);
        alert('hi');
    }
});

Edit

Upon testing it myself, I was able to make it work with the following adjustments:

dojo.provide("MyWidget");
dojo.declare('MyWidget', [dijit._Widget, dijit._Templated],
{
    'templateString':
        '<span>' +
            '<a dojoAttachPoint="linkNode">' +
                '<img class="thumbNail" src="blahthumb.php" />' +
            '</a>' +
            '<h4 dojoAttachPoint="title" class="title">${blahtitle}</h4>' +
        '</span>',

    'startup':function()
    {
        dojo.connect(this.linkNode, 'onclick', function(e){dojo.stopEvent(e);alert('hi');});
    }
});

To initiate it, I needed to attach it to the DOM before invoking the startup function.

var f = new MyWidget();
dojo.body().appendChild(f.domNode);
f.startup();

The only modifications made were adding dojo.provide(...) and using _Widget instead of _WidgetBase. Additionally, reordering the steps as suggested. Now, clicking on the image triggers the alert "hi" without navigating to the link.

Answer 3

Answer №2

After careful investigation, I was able to uncover the issue. Surprisingly, it had nothing to do with the widget's construction process but rather a particular function that altered the widget right after execution. The peculiar part is how this alteration led to the disappearance of onclick events. Analyzing further, I found that it was due to the manipulation of the innerHTML attribute within certain dom nodes of the widgets. Once I disabled that specific segment of code, everything started functioning smoothly again.

Answer 4

After careful investigation, I was able to uncover the issue. Surprisingly, it had nothing to do with the widget's construction process but rather a particular function that altered the widget right after execution. The peculiar part is how this alteration led to the disappearance of onclick events. Analyzing further, I found that it was due to the manipulation of the innerHTML attribute within certain dom nodes of the widgets. Once I disabled that specific segment of code, everything started functioning smoothly again.

Unable to set an onclick function within a customized dojo widget

Answer №1

Edit

Answer №2

Similar questions

Styling a table based on specific conditions using Angular and JavaScript

I am experiencing some difficulty with the GetServerDate using the JSON protocol in JQuery; it's

Listening for a click event on a newly added element using JQuery

The Less compiler (lessc) encounters an issue on a fresh operating system. ([TypeError: undefined is not a function])

Cross-Origin Resource Sharing (CORS) verification for WebSocket connections

The issue of for loops malfunctioning in JavaScript when using a variable declared in Node.js and passed to Jade

Unable to find the module... designated for one of my packages

Incorporating script within an ASPX webpage

Is there a way to store the URLs that a user visits locally with a Chrome extension using JavaScript?

I just installed Electron on my Mac using the command 'sudo npm install electron -g', but now I am encountering an error. How can I resolve this issue

Utilizing ReactJS to fetch data from Material-UI's <TableRow/> component upon selection - a comprehensive guide

Tips for adding a dynamic variable into a react JSX map function

the router is having trouble choosing the right function

Display information when hovering over a tag

What methods can I use to compare a React Component across multiple pages with Cypress?

Refresh a webpage using JavaScript (inside a jquery ajax call)

Understanding the distinction between assigning a value and setting text through JSE in Selenium using C#

The npm package for google-spreadsheet.js is experiencing issues and is not functioning correctly when trying to replicate the GitHub

Utilizing Unidirectional Binding within an AngularJS Directive

React-Bootstrap Popup encounters overlay failure