Hi,
Those solutions sound a little overkill. Something really simple
should do it, like this:
function stopEvent(e)
{
e.stop();
}
function disableLink(link)
{
Event.observe(link,"click",stopEvent);
Element.addClassName(link,'disabled');
}
function enableLink(link)
{
Event.stopObserving(link,"click",stopEvent);
Element.removeClassName(link,'disabled');
}
function disableAllLinks()
{
$$('a').each(disableLink);
}
function enableAllLinks()
{
$$('a').each(enableLink);
}
- stopEvent() function is used by others (don't call it directly)
- if you want to disable a link with an id, you may use disableLink($
('idOfTheLink'))
- if you want to disable all links of the page, use disableAllLinks()
- addClassName and removeClassName calls are not necessary to disable/
enable the link, but as a user I really hate it when some UI component
doesn't work as it should. This allows you to provide some visual
feedback to your users.
- This is a minimalist example. If you feel like it, try to use
Element.addMethods and Function.methodize to add enable and disable
methods to links DOM elements (don't forget to extend the element at
the beginning of your method, and to return it at the end to allows
chain calls :o)
You have a fully working example here: http://jsbin.com/itike3
Eric
NB: I've lost 20 minutes (sic) figuring why my disableAllLinks()
methods didn't work as expected before finding out that $$() DOESN'T
WORK on jsbin in edit mode (it works on "save to public" urls)... So
think about it if it happens to you :o) ($$() seems to be replaced by $
() for some reason...)
On Sep 16, 2:12 pm, david wrote:
> Hi Arnaud,
>
> your pasted code does not work on FF3.5.3.
> So I modify it this way, it should work on all browser, only test with
> FF3.5 & IE6 :((
> Here is your version modified:
>
>
>
>
>
>
>
> var a_create = new Element('a', {
> id : 'btn_create',
> href : 'javascript:linkOnClick();'}).update
> ('[ Create ]');
>
> var l_create = new Element('label',
> {id:'btn_create'}).update('[ Create ]');
>
> function linkOnClick() {
> $('btn_create').replace(l_create);
> alert("disable");
> }
>
> function activateLink() {
> $('btn_create').update(a_create);
> alert("activate");
> }
>
>
> [ Create ]
>
>
>
>
> But multiple click on the button break the sentence. So it did not
> work well !!
>
> But as you request a simple version, why not doing something like
> that:
>
>
>
>
>
>
> function activateLink() {
> $('btn_create').hide();
> $('btn_create_a').show();
> alert("enable");
> }
> function linkOnClick() {
> $('btn_create').show();
> $('btn_create_a').hide();
> alert("disable");
> }
>
>
> [ Create ]
> href="javascript:linkOnClick();">[ Create ]
>
>
>
>
> It's simpler and work in all case even on multiple click on the
> button.
> But depending on what you want to do, there could have a lot of
> possibilities to achieve to this.
>
> btw, you use DOM0 event to trap the mouse click, have a look
> at:http://prototypejs.org/api/event
> to know how to use event with prototype. So you could use Event.stop
> (Alex exemple), or the preventDefault property.
> And you could define multiples events on the same element id using
> this way.
>
> --
> david
>
> On 15 sep, 17:02, Arnaud Feltz wrote:
>
> > 2009/9/14 Arnaud F.
>
> > > Hello,
>
> > > i need to disable a link in some case.
>
> > > What I do actually is something like this :
>
> > >
> > >
> > > > > script>
> > >
> > >
> > >