Martinus
Premium
join:2001-08-06
EU
|  javascript onclick
I know using onclick in links is frowned upon but I've "inherited" a Web app on which I have to do some maintenance. I have no problem with the backend.
There is a mixture of links that open popups, etc and these are in the kind of:
a)
or
b)
I am not ready yet to put jQuery and put all this stuf in $(document).ready() but I would like to normalize all these links so I can find them easier later on.
So, which would be the preferred method? a or b?
Also, if using a, what would be best?
or
Many thanks
Martinus |
|
Ashke
Flips page and continues reading
Premium
join:2007-09-11
Saint Paul, MN
 ·Qwest.net
| Okay, Martinus...
It seems you want to use JavaScript to open a popup. I tend to use the following:
You can use one example, but look at how I lay it out.
And for the record... you can use javascript, java, html, xhtml, dhtml, etc... for the code. But be sure the code type is in lowercase. Example:
[ code = xhtml ] (with no spaces)
--
-Ashke |
|
Martinus
Premium
join:2001-08-06
EU
| Thanks, Ashke 
These links open popup windows. The arguments are URLs which are usually pictures or small help docs. And they work.
My idea is to replace these popups with jQuery and ThickBox. But I can't do that at this stage.
What I would like to know is which is the preferred method of the ones mentioned in my post. |
|
Ashke
Flips page and continues reading
Premium
join:2007-09-11
Saint Paul, MN | I would say start with "javascript:
--
-Ashke |
|
JAAulde
yum yum yum yum yum
Premium,MVM
join:2001-05-09
Hagerstown, MD
1 edit | reply to Martinus
Martinus , I would do the following:
This way your links are real, yet are being taken over by JS to execute your preferred behavior. This also gets you better prepared to later remove the offending hardcoded onclicks.
As for the second part of your question, I wouldn't sweat it too hard either way. Some of it depends on the function you're calling in the onclick and its purpose, other usages, and return value. If you know your function is always going to return false, I'd probably stick with the second option listed in the second portion of your question.
Ashke , just so you know the javascript pseudo protocol really shouldn't be used in an event handler such as onclick.
Edit: Martinus , my example is assuming you're opening a URL in a popup window. If you have other onclick code you're executing, I'd move it from using an A tag to something like a SPAN or BUTTON which you style to attract attention to the action.
--
No eat apple, eat cookie. Apple spoil dinner.
My Development Sandbox | LinkedIn Profile |
|
Martinus
Premium
join:2001-08-06
EU
| Thanks, JAAulde . That's what I was looking for.
said by JAAulde :...Some of it depends on the function you're calling in the onclick and its purpose, other usages, and return value. If you know your function is always going to return false, I'd probably stick with the second option listed in the second portion of your question. So, opening a popup window should always return false? In which case would an onclick event return true or you would want it to return true - or a value? |
|
JAAulde
yum yum yum yum yum
Premium,MVM
join:2001-05-09
Hagerstown, MD
| The purpose of returning false when an event is handled is to avoid propagating the event through the event chain. Allowing the event to propagate would allow the objects default action to take place.
So in the case of a link which you want to open in a new window, if you didn't return false, the window would open and the event would continue propagating until the default behavior of an A object is fired. Since that default behavior is to send your browser to a new page, the original window would go to whatever is in the href tag, and the new window would be open to where you aimed your function.
--
No eat apple, eat cookie. Apple spoil dinner.
My Development Sandbox | LinkedIn Profile |
|
Graycode
join:2006-04-17
 ·net2phone
| reply to Martinus
I like what JAAulde explained about the onClick. I would probably just use '#' as the target.
or
I you had to use the <a href="javascript: method then you also need to surround the script portion with void(). Otherwise the script will run to create the popup and also some browsers will be confused about what to do next with its events. Using void() avoids the problem. Note that void() returns neither true nor false, think of it as nothing.
|
|
Martinus
Premium
join:2001-08-06
EU
| Thanks, Graycode
said by Graycode :I like what JAAulde explained about the onClick. I would probably just use '#' as the target. Agree. I guess I'll do it this way. |
|
PingPong
join:2001-02-02
Overhere, HI
clubs: 
| "#" puts an anchor in your browser's location though... href="javascript:void(0)" is the second best way, after putting an actual url in there and returning false onclick (yea void() needs a bool argument).
I find it a bit annoying that some people put "javascript:" in onclick since it's a protocol for url's... =p |
|
JAAulde
yum yum yum yum yum
Premium,MVM
join:2001-05-09
Hagerstown, MD
| Yeah, using the javascript pseudo protocol in event handlers is silly. And really, it's very outdated to use it in an href attribute. It still serves a purpose here and there, but it in almost every case it's required due to lack of "semantic" document structure in the markup.
An anchor (A) tag should be used only where its basic behavior would make sense if JS didn't take anything over. Thus my recommendation of using a real URL in the href attribute. Appended or overriding behavior should then be injected into the document via the language of choice, which language should take advantage of the semantic markup to minimize the amount of work it has to accomplish.
Using # or void() as the href of a link which should open a URL in a new window is hackish, requires more work on your part, often produce non-accessible pages, etc, etc, etc
--
No eat apple, eat cookie. Apple spoil dinner.
My Development Sandbox | LinkedIn Profile |
|
Tenar
join:2008-01-02
Midland, ON
| reply to Martinus
I agree with JAAulde that a good philosophy is to use unobtrusive javascript. Leave the links as regular links and use external javascript files to apply the event action.
This way, bots and browsers without javascript see:
While most visitors will get the popup action that is applied by targeting the link and assigning an onclick event in your external file. |
|
Martinus
Premium
join:2001-08-06
EU
| reply to Martinus
Thanks, everybody!!!
OK. I'll be using this one:
It will be temporary though as my plan is to replace all these popups with ThickBox or similar. I like ThickBox for its ability to display different types of content. |
|
