in a code which i am goin through there is a link has href=javascript:; in code.when it is clicked it opens a lightbox to show some msg with close button.how is it done.I think this uses dojo
The code:
..
will actually do nothing. Generally this Nothing link allows some javascript code to use the onclick event instead. The onclick event triggers the window which may be from django or jquery or wherever.
EDITED:
i have just added this link that explane you how dojo work with onlclik event:
Dojo, how to do onclick event on a DIV
ok, just for the sake, all the answer here are good answer, in your particular case if you are using Dojo
the <a href="javascript:;" > simply prevent your <a> tag to jump around when clicked and of course have no action!
probably you have something like this in your code:
<a href="javascript:;" id="some" class="some_too" rel="some_too_too">
Dojo simply keep the <a> id OR class OR rel tags and execute the function!
href="javascript:somefunction();" is just a way to point to a function of some javascript code.
You can also do: href="#" onclick="somefunction();return false;"
Nothing really dojo about it. All it does is call the function or javascript code. It just tells the element to use javascript.
or href="javascript:void(0);" onclick="somefunction();" as stated already.
It's known as the javascript pseudo-protocol. It was designed to replace the contents of the document with a value calculated by JavaScript. It's best not to use it, for several reasons, including:
If JavaScript is disabled, you have a link that goes nowhere
If your JavaScript returns a value, the contents of the page will be replaced by that value
More reasons why you shouldn't use it
<a href="javascript:void(0)" onClick="callFunction();">
Call callFunction() method onClick
this can also be used as foollows
<a href="javascript:callFunction();">
<a href="#" onClick="callFunction();">
this also call javascript callFunction() method but it adds # in your URL to Avoid this Use
<a href="javascript:void(0)" onClick="callFunction();">
I believe this just indicates that your link is going to perform some javascript function. Usually you couple this by hooking up events on the link e.g. OnClick/OnMouseMove
All this does is make a call to a Javascript function which executes some Javascript. Maybe posting the code as an example helps.
Supposedly, it's a URL to a resource that's reachable via the "javascript" protocol, just like you can have "http:" or "ftp:". I don't know if it's an actual standard but most browsers understand that the URL must be fed to the JavaScript interpreter. So, in practice, you can use it to have JavaScript code that's triggered by a link, e.g.:
Say hello
Of course, writing your JavaScript code inside HTML tags is neither clean nor mantainable. But the possibility exists.
What about href="javascript:;"? If you pay close attention, you'll realise that ";" is a JavaScript code snippet that, well, does nothing. That's the point. This is often used to have a link that points nowhere. The main purpose is that clicking on it triggers JavaScript code defined somewhere else (via onclick event handlers).
Last but not least, you often see stuff like onclick="javascript:doStuff()". The onclick HTML attribute expects Javascript code, not a URL. In this situation, the javascript: prefix is totally superfluous. However, the code still runs. It happens to be a label in JavaScript syntax just by chance ;-)
Related
why do developers use href="javascript:;"
e.g.:Content of the A Tag:
<a class="anchor" title="title" href="javascript:;" id="someId">...</a>
The javascript: pseudo-protocol tells the browser that what follows is JavaScript code that should be executed when the link is clicked. What follows in your example is a no-op, and so clicking the link does nothing. Typically this is used when the link isn't being used as a link but rather as a button, where the actual behavior the coder wants is specified by a click handler.
from my experience using, if people use <a href="www.google.com"> I can right click and open it on a new tab. But if it is href=javascript:openLink() I can't open it on a new tab
Good question. Its so that their link doesn't do anything. The developer is probably adding in the javascript function dynamically using Jquery's click event or something similar.
It seems to be a legacy bad habit that people have. They probably want the style of an href but then don't want the functionality of it. You can easily do this without using an href. In a way, they are saying "Here is the value for a link" and then immediately going "ignore the value for my link".
There is a good discussion here:Unobtrusive Javascript
According the the w3schools the value for an href should be a url or a script. When someone does href="javascript:;"
They are using a script that does nothing. They just do it so they can using the styling/tabbing the href offers... which, in my opinion, should be done another way like using css classes.
Also according to the w3schools the tag cannot use certain other attributes if the href is not present, but in HTML5 the tag should only be used for hyperlinks.
We're using JSON in some parts of our PHP project. The edit part has been programmed by JSON, so the href part contains something like below:
Edit
We want to check that if Javascript is disabled then change the URL as follow, because the above link would not work if JS is disabled:
Edit
We tried <noscript>, but we gain no success. how to do something like above, we're stuck here.
I appreciate in advance.
Default to your non-Javascript state, then use Javascript to cancel the following of the link. Users without Javascript will then follow the link, and those that have it enabled will not.
Maybe you can build your page normally using the php link href="./edit.php?id=12&text=some_text_here" and when your document is loaded execute a javascript function that will replace the href attribute of the <a> tag with javascript:void(0);
Example of the function with jquery:
$('a.button').attr('href', 'javascript:void(0);');
If the user doesn't have Javascript then the href attribute won't be updated.
You might want to use what is know as "progressive enhancement". This basically means, you write your HTML as if JavaScript is not enabled, then use JavaScript to enhance the features.
This is usually achieved by attaching events, modifying the DOM etc. within a function that is called on page load.
You can do something like this:
Edit
<script type='text/javascript'>
// ...or however you assign a click handler to the element
document.getElementById('button').onclick = function() {
// Do Javascript stuff here
return false;
};
</script>
If you return false from your click handler, the Javascript-enabled browser will not navigate to the link's location. When Javascript is disabled the link will be followed as normal.
Is the javascript: prefix really needed? I know you should aim for unobtrusive JavaScript but under what circumstances would something break if it is not there?
javascript: is a URI scheme.
It is needed to create a URI that runs Javascript, either in an href="" attribute or in the browser address bar.
There is never a situation in which javascript: is optional.
Best practices indicate that javascript: URIs should be avoided where possible in favor of click handlers, so its use is frowned upon.
However, there are cases where there is no alternative. For example, bookmarklets can only be created by using javascript:.
They're "needed" if you are encoding Javascript code into an URI, for example in the href property of an <a> tag.
They're bad practice, though.
If you put JavaScript code into the href attribute of an a, or other attribute which takes a URL, then it's required for the browser to detect that it is JS. It's not necessary (and may not even work) if you use it with onclick or other attributes that already expect JS code.
That "prefix" is used only in the href attribute of an html anchor (). It is never actually needed, since you could as well define a click event handler.
It is needed even in onclick situations if you also have a VBS routine on the same page.
This question already has answers here:
href="javascript:" vs. href="javascript:void(0)"
(8 answers)
Closed 7 years ago.
I have seen href="javascript:void(0)" and I have seen href="javascript:;" Is there any reason I would not just use href="javascript:" instead?
Edit: Let me make it clear: I am combining this with an onclick and have no objection to using return false if it becomes necessary to use the alternative. Of course this is only if the alternative makes better sense over javascript:.
Also, I have yet to see a answer to my question shown (clearly I think) in the first paragraph. Thanks, david. :)
I have seen href="javascript:void(0)" and I have seen href="javascript:;" Is there any reason I would not just use href="javascript:" instead?
Personally I'd avoid using either. I'd have onclick='return false;' instead, and just set href='#'.
Why? Because if you put Javascript code in the href, then it appears in the browser's status bar when you hover over the link, just like any other URL. It just looks messy.
In fact, since it's going to be ignored anyway, you could put any URL you fancy into the href, not just a hash. The hash is safest, just in case your user has Javascript disabled, but aside from that point, it could be anything.
But I have to point out: having an <a> tag with the href going to a void Javascript code seems to rather defeat the point of having an <a> tag in the first place. I can see how you'd want to enable and disable a link at runtime, but simply setting the href to void does seem somewhat pointless. If it isn't going to be a real link, why not just have a <span> or some other tag. If you must make it look like a link, it's trivial to do that in CSS.
Doesn't answer you question but may shed a bit more light on it, some early versions of browsers like netscape had problems when a script was used within the href.
The void operator was pretty much to only way force the click to do nothing.
Now, with browsers properly implementing "pseudo URLs", you can safely just use javascript:;.
The ideal situation is to not put any code on the element itself, but rather use javascript in either a script tag, or in an external file and bind the event handler there.
It's better not to use either. The href attribute indicates a url. It's better to use event handlers to get the desired behaviour, which is probably the onclick event.
In this case the desired behaviour apparently is to do nothing. Firstly, why use an anchor tag at all when it doesn't link anywhere? Secondly, this can be handles by preventing event bubbling, by letting the onclick event handler return false. Then the href can either point to #, or better even to have it point to a url that more or less has the same effect as the event handler, so it will degrade gracefully when javascript is turned off.
I'm trying to call a simple function with alert but it wont work when i try call the function (contained in an external js file) from my html page.
I have a import and the call is very simple. Any suggestions?
<head>
<script src="/js/jsFunctions.js" type="text/javascript"></script>
In my code I call
<a href="javascript:displayAlertText('someText');">
Inside the js I have some jquery followed by a function
function displayAlertText(someText)
{
alert('alert' + someText);
}
What you are doing looks like it should work. The problem is likely elsewhere.
Hrefs with "Javascript:" prefixes are really rather horrible. Instead, try rewriting that as:
<a href="#" onclick="displayAlertText('someText'); return false;">
Beyond that (which I don't think would actually be causing it), you've committed the cardinal sin of saying "It didn't work". Did you get any Javascript errors in the console? I suspect you would have, unless a valid function really was called.
Also, try calling the JS function explicitly from within a <script> block on your page, to see at what point it's failing.
Double-check as well that the external file really has been loaded at the time you click on the link - perhaps put a line at the bottom of the external script file to help check this, such as
alert('External file loaded.');
EDIT (based on comment): OK, so we've established you can call the method from "normal" JavaScript on your page. This means that the problem lies with the way that you're trying to call the script from your hyperlink.
Have you passed your HTML through a validator? If the syntax is invalid, then user agents can interpret it however they want, including ignoring it completely.
If the HTML does validate then at this point it might be useful to post a link to your full HTML, so that others can look over it and see where the problem lies. It's possibly something like another function overriding the onclick event for the link, and so your event handler gets lost.
In pure jQuery you would do this like:
$(document).ready(function(){
$('a').click(function(){
alert('here');
})
})
try this instead...
<a href="#" onclick="displayAlertText('someText');">
If that does not help, I would start making sure that your javascript file is loading correctly and doesn't contains some simple syntax error somewhere. View your page with Firebug on in Firefox and look for warnings and errors.
You mentioned jQuery. Is the function standalone or inside a jQuery object (i.e. wrapped inside another function)? This makes difference.
Apart from this problem, the way you invoke the function isn't clean. Move it to the onclick attribute or better make use of jQuery.