CODEWITHSUNDEEP
csswicket
Yuval
Yuval

Reputation: 8087

Is there a way to dynamically change a button's CSS class?

I'm working on a Wicket-based web application. In the application there are buttons that not every user is authorized to use. These buttons are actually simple links, e.g.

<a wicket:id="publishButton" title="Publish" class="rightPanel_publish"><wicket:message key="publish"/></a>

with a CSS class (from an external CSS file) that sets their visual appearance, e.g.

a.rightPanel_publish {
    display: block;
    width: 90px;
    height: 27px;
    background: url( ../imgs/right_panel_icon03.gif ) left top repeat-y;
    text-decoration: none;
    color: black;
    padding: 12px 0px 0px 35px;
}

When the user is not authorized to use the button, the link is disabled (in Java) and the CSS, for some reason, is not used anymore.

My question is this: is there a way to identify that the link is disabled at runtime and change the CSS class? I would rather avoid using javascript (managed to keep the entire project JS-free so far...), and prefer something that would work with all browsers.

Thanks a bunch,

Yuval =8-)

Upvotes: 2

Views: 4712

Answers (5)

Katlu
Katlu

Reputation: 506

You can also change the button's appearance (i.e. css class) with an AttributeModifier, based on the user authentication state:

myButton.add(new AttributeModifier("class", new AbstractReadOnlyModel<String>() {

        private static final long serialVersionUID= 1L;

        @Override
        public String getObject () {
            if (!isAuthorized()) {
                return "rightPanel_unauthorized";
            }
            return "rightPanel_publishbutton";
        }
    }));

In your CSS, you then define the ".rightPanel_unauthorized" style as you need it.

Upvotes: 2

svenmeier
svenmeier

Reputation: 5681

Wicket links replace the <a> tag with a <span> when disabled.

Keep that in mind when applying CSS, e.g.:

.rightPanel_publish_button {
  display: block;
  width: 90px;
  height: 27px;
  background: url( ../imgs/right_panel_icon03.gif ) left top repeat-y;
  text-decoration: none;
  color: black;
  padding: 12px 0px 0px 35px;
}

Upvotes: 1

OnesAndZeros
OnesAndZeros

Reputation: 383

I use the *.setVisible(Boolean boolean)

It is available for WebMarkupContainer models in Wicket. The setVisible() can be assigned elsewhere in the class based on user roles. so you may have to look for it...

Upvotes: 0

annakata
annakata

Reputation: 75794

There is no way to do this without scripting of some kind. The "D" in "DHTML" stands for "Javascript" :P

Edit: Actually, since you say something is disabling the link/button, that something could/should also append a "disabled" class (the only x-browser way to get CSS to notice) to the same element. Run-time switching doesn't come into it - if a thing is changing state it needs to do so thoroughly.

Upvotes: 1

Justin Yost
Justin Yost

Reputation: 2340

Unfortunately I don't know of a way to change a button's page without JS. CSS, Java and everything else runs while the page is loading, after the page has loaded the only way to interact with the page is via JS.

However here is the JS that works in any browser (IE 6+, Safari, Opera, FF, etc),

  if(document.getElementById('foo'))
  {
    document.getElementById('foo').className='bar';
  }

Upvotes: 3

Related Questions