|
Martinus
Premium Member
2009-Oct-31 8:24 am
javascript onclickI 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) <a href="#" onclick="openpopup('someargument')">Click here</a>
or b) <a href="javascript:openpopup('someargument')">Click here</a>
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? <a href="#" onclick="openpopup('someargument'); return false">Click here</a>
or <a href="#" onclick="return openpopup('someargument')">Click here</a>
Many thanks Martinus |
|
AshkeFlips page and continues reading Premium Member join:2007-09-11 Minneapolis, MN
1 recommendation |
Ashke
Premium Member
2009-Oct-31 10:55 am
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. <a href="someLink" onclick="javascript:alert('someArgument');">Click Here</a>
<a href="someLink" onclick="javascript:confirm('someArgument');">Click Here</a>
<a href="someLink" onclick="javascript:prompt('someArgument');">Click Here</a>
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) |
|
|
Martinus
Premium Member
2009-Oct-31 11:44 am
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. |
|
AshkeFlips page and continues reading Premium Member join:2007-09-11 Minneapolis, MN |
Ashke
Premium Member
2009-Oct-31 12:00 pm
I would say start with "javascript: |
|
JAAuldeWeb Developer MVM join:2001-05-09 Frederick, MD ARRIS SB6141 Ubiquiti EdgeRouter Lite Ubiquiti UniFi AP
1 edit
1 recommendation |
to Martinus
Martinus , I would do the following: <a href="http://www.dslreports.com/" onclick="return openpopup( this.href );">Click here</a>
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. |
|
|
Martinus
Premium Member
2009-Oct-31 1:25 pm
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? |
|
|
JAAuldeWeb Developer MVM join:2001-05-09 Frederick, MD ARRIS SB6141 Ubiquiti EdgeRouter Lite Ubiquiti UniFi AP
1 recommendation |
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. |
|
1 recommendation |
to Martinus
I like what JAAulde explained about the onClick. I would probably just use '#' as the target. <a href="#" onclick="return openpopup('someargument')">Click here</a>
or <a href="#" onclick="openpopup('someargument'),return false">Click here</a>
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. <a href="javascript:void(openpopup('someargument'))">Click here</a>
|
|
|
Martinus
Premium Member
2009-Nov-1 1:32 am
Thanks, Graycode said by Graycode:I like what JAAulde explained about the onClick. I would probably just use '#' as the target. <a href="#" onclick="return openpopup('someargument')">Click here</a>
Agree. I guess I'll do it this way. |
|
|
"#" 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 |
|
JAAuldeWeb Developer MVM join:2001-05-09 Frederick, MD ARRIS SB6141 Ubiquiti EdgeRouter Lite Ubiquiti UniFi AP
|
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 |
|
Tenar join:2008-01-02 Midland, ON
1 recommendation |
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: <a href="somepage.htm">Click here</a>
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 Member
2009-Nov-3 1:17 pm
Thanks, everybody!!! OK. I'll be using this one: <a href="http://www.dslreports.com/" onclick="return openpopup( this.href );">Click here</a>
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. |
|