Question

I’ve started to learn the dojo Toolkit and i like it so far, it seems to me easier to understand than jquery/prototype JS. I’m still new at it (and in javascript) and while there is a plethora of docs available on the net i don’t really understand how to achieve simple tasks like making a hidden visible with dojo. So to the problem:

the html

<!-- the numder in id="comment" and in href="javascript:display_comments('')" is the post_id that i want the comments to be fetched for -->

<div class="comments">
    <a id="comment8" href="javascript:display_comments('8');">comments</a>(21)
</div>
<div style="visibility: hidden;" id="display_comments8">

</div>

<div class="comments">
    <a id="comment7" href="javascript:display_comments('7');">comments</a>(13)
</div>
<div style="visibility: hidden;" id="display_comments7">

</div>

<div class="comments">
    <a id="comment15" href="javascript:display_comments('15');">comments</a>(20)
</div>
<div style="visibility: hidden;" id="display_comments8">

</div>

the javascript

function display_comments(id) {
    divid = 'display_comments'+id;
    var element = document.getElementById(divid);
    if(element.style.visibility == 'hidden') {
        element.style.visibility='visible'
    }else if(element.style.visibility == 'visible') {
        element.style.visibility='hidden';
        element.innerHTML='';
    }
}

The parameter for display_comments() in the post_id which then is merged with the words ‘display_comments’ so to know which div to make visible. How can this be achieved in dojo?

Answer 1

Basically what you want to do here is automate things a bit right? If you attribute your links either by id, like i use below, or some other way (non validatable properties or html5 data-attributes) then you can use dojo.query to find all the nodes in your container and attach an event to them. I gave you a link to the dojo.query syntax page in case you wanted to make your query syntax more specific.

After looping through all the a nodes in container and attaching a click event with a handler that passes the node’s id (the dojo.partial stuff), you just need to handle the click event. The toggle display uses dojo core to change and modify the style of the node – pretty simple.

Based on your example this is how I would change your code.

There are a lot of ways you could achieve these results. Personally, I would create templated widgets. Since this code looks repetitive, you could dojo.declare a comment class and dojoattachevents to the links and dojoattachpoint to the hidden node. This way you wouldn’t have to dojo.query or dojo.byId since widget would wire all that up for you. You could create one for each and use class syntax to handle the logic.

<div id="container">
<div class="comments">
    <a id="8">comments</a>(21)
</div>
<div style="visibility: hidden;" id="display_comments8">

</div>

<div class="comments">
    <a id="7">comments</a>(13)
</div>
<div style="visibility: hidden;" id="display_comments7">
<div>

dojo.query reference

dojo.query("#container a").forEach(function(node) {

dojo.connect reference

dojo.partial reference

dojo.connect(node, 'onclick', dojo.partial(toggleDisplay, node.id));
});

dojo.byId reference
dojo.style reference

   function toggleDisplay(node) {
        var hiddenNode = dojo.byId('display_comments' + node);
        var display = dojo.style(hiddenNode).visibility === 'visible' ? 'hidden' : 'visible';
        dojo.style(hiddenNode, {
            visibility: display
        });
    }

Working Example
jsfiddle example

Books

we have dojo the definitive guide and mastering dojo and getting startED with dojo.
PS all these books are outdated and the best information is found on the test pages/the irc #dojo chat room/and the reference guides.