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 <david.brill...@gmail.com> 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:
>
> <html>
> <head>
> <script src="prototype.js" type="text/javascript"></script>
> </head>
> <body>
> <script type="text/javascript">
> 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");
> }
> </script>
>
> <label id="btn_create">[ Create ]</label>
> <input type="button" onclick="activateLink();" value="Activate
> link" />
> </body>
> </html>
>
> 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:
> <html>
> <head>
> <script src="prototype.js" type="text/javascript"></script>
> </head>
> <body>
> <script type="text/javascript">
> function activateLink() {
> $('btn_create').hide();
> $('btn_create_a').show();
> alert("enable");
> }
> function linkOnClick() {
> $('btn_create').show();
> $('btn_create_a').hide();
> alert("disable");
> }
> </script>
>
> <label id="btn_create">[ Create ]</label>
> <label id="btn_create_a" style="display:none"><a
> href="javascript:linkOnClick();">[ Create ]</a></label>
> <input type="button" onclick="activateLink();" value="Activate
> link" />
> </body>
> </html>
>
> 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 <arnaud.fe...@gmail.com> wrote:
>
> > 2009/9/14 Arnaud F. <arnaud.fe...@gmail.com>
>
> > > Hello,
>
> > > i need to disable a link in some case.
>
> > > What I do actually is something like this :
>
> > > <html>
> > > <head>
> > > <script src="javascript/prototype.js" type="text/javascript"></
> > > script>
> > > </head>
> > > <body>
> > > <script type="text/javascript">
> > > var a_create = new Element('a', {
> > > id : 'btn_create',
> > > href : 'javascript:linkOnClick();',
> > > innerText : '[ Create ]'});
>
> > > var l_create = new Element('label',{id:'btn_create',
> > > innerText:'[ Create ]'});
>
> > > function linkOnClick() {
> > > $('btn_create').replace(l_create);
> > > alert("disabled");
> > > }
>
> > > function activateLink() {
> > > $('btn_create').replace(a_create);
> > > alert("activate");
> > > }
> > > </script>
>
> > > <label id="btn_create">[ Create ]</label>
> > > <input type="button" onclick="javascript:activateLink();"
> > > value="Activate link" />
> > > </body>
> > > </html>
>
> > > It works fine but, It's possible to do much easier ? If not, how can I
> > > override only the link tag whitout modifying other Elements?
>
> > > Thanks !
>
> > I tried to launch this page in Chrome / Firefox, it doesn't work... It works
> > only in IE...
>
> > I'm the only one who tries to desactivate a link?
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
