dojo show() and hide() porting from jquery()

Question

I am just porting a bunch of code from jQuery to DOJO (1.8). I was stumbling upon show/hide of DOM elements (may it be layers or anything else).

Let's say we have a layer that we want to show or hide, without animation. Imagine a Buttonbar that changes on some event, I don't necessarily want to bring in graphical effects all the time.

<div id="myLayer">hide me</div>

In jQuery I would do:

$("#myLayer").show();  // to show
$("#myLayer").hide();  // to hide

which I find very nice and slim. Now porting to DOJO I found that I need to do the following:

require(["dojo/fx/Toggler"], function(Toggler) {
    // Create a new Toggler with default options
    var toggler = new Toggler({
      node: "myLayer",
      hideDuration: 0,
      showDuration: 0
    });

    // Hide the node
    toggler.hide();

    // Show the node
    toggler.show();
  });

That's 8 lines of code versus 2 lines of code. Am I missing something? Is there any faster way to do a simple hide?

Thanks a lot, Tobi

please see this [question](http://stackoverflow.com/questions/7274282/dojo-toggle-hide-and-show-divs) , but before you go any further with dojo if your aim is some dom manipulation then it's not the place to go (they wouldnt have created it , if it was the same thing ) please read more on when to chose dojo for your project , this is just a small tip :) — Hussein Nazzal, Mar 10 '13 at 17:00
I am doing a lot of AJAX based WebUI stuff in my application. I found it quite handy to combine different functionality within one (jsp) view, without having to switch pages (and in the MVC pattern also controller and stuff behind) for simple tasks. Thus I believe having a solid JavaScript Framework in hand is good practice. As a side effect DOM manipulation comes with it of course. I found that quite easy in jQuery but am stuggeling with dojo though... perhaps there is something wrong in my general approach. — Tobias N. Sasse, Mar 10 '13 at 17:09

Craig Swing · Accepted Answer · 2013-03-10T17:17:10.087

6

require(["dojo/query", "dojo/NodeList-dom", "dojo/domReady!"], function(query){
  query("#myLayer").style("display", "none");
});

edited Mar 10 '13 at 17:17

answered Mar 10 '13 at 17:04

Craig Swing

8,152
2
30
43

Craig, thanks for your input. Haven't figured out why yet, but query("#myLayer") or query("mylayer") both return null for me... grml – Tobias N. Sasse Mar 10 '13 at 17:15
you would do the show() with .style("display", "inline") or .style("display", "block") then? – Tobias N. Sasse Mar 10 '13 at 17:24
The default use should be block. The jquery method will use inline only if the element was originally displayed with inline. – Craig Swing Mar 10 '13 at 17:36
2

.style("display", "") should work to show both inline, block, and other elements. – Eugene Lazutkin Mar 11 '13 at 07:06

dojo show() and hide() porting from jquery()

1 Answers1